Relative Navigation zu fixer Wechseln

[bauralex]

Hallo zusammen...

Ich will in meine Page eine vertikale Unternavigation einbauen. Diese soll vorerst nicht ersichtlich sein (position top: 600px), beim Scrollen soll diese mit hinaufkommen, also eine relative position, und sobald ein margin-top von 100px erreicht ist, soll diese Unternavigation fix an dieser Stelle bleiben.

Ich hoffe ihr versteht meine Erklärung


Leider habe ich keine Beispiele, ich hab dies jedoch mal gesehen, weiss leider nicht mehr wo...

Wäre froh wenn mir jemand Tipps geben könnte.

grüsse alex

 

[djfabi]

Ich glaub mit CSS wird das nix ;)
Hier ist JavaScript von nöten.

Versuch am besten jQuery. Damit geht das einfach.

Meinst du sowas hier: Gymnasium Fallersleben


Einfach runterscrollen, dann kommt das Menü mit :)

Wenn es das ist poste ich auch gerne den Code :)

MfG

 

[bauralex]

hallo djfabi,

ja genau das suche ich... mein menu ist halt vorerst auf der seite weiter unten scrollt dann nach oben und bleibt stehen... aber die logik ist natürlich die selbe wäre sehr dankbar um den code

lg

 

[phzu]

Hallo!

Ich habe das erst kuerzlich fuer eine Sidebar verwendet...
Dies ist der Thread dazu: http://www.html.de/css/45490-such-box-der-seite-fixieren.html

Es ist ein Link darin zu einem JQurey Code, der super funktioniert! Den Rest machst du dann ueber CSS Angaben!

Hoffe es ist das was du suchst!

mfg

 

[bauralex]

Ich habs nun hingekriegt... klappt super...danke für die Antworten

nachfolgend mein JS, CSS und HTML

JS:

<script type="text/javascript">
       
          $(document).ready(function () {
              
              var top = $('.teaser').offset().top - parseFloat($('.teaser').css('marginTop').replace(/auto/, 0));
              $(window).scroll(function (event) {
                
                
                  // what the y position of the scroll is
                  var y = $(this).scrollTop();
                      
                  // whether that's below the form
                  if (y >= top) {
                      // if so, ad the fixed class
                     $('.teaser').css("position", "fixed");
                     $('.teaser').css("top", "0px");
                      
                  } else {
                      // otherwise remove it
                      $('.teaser').css("position", "relative");
                       
                
                     
                  }
              });
          });
</script>

CSS:

.teaser {
    position: relative;
    
}

HTML:

<div class="teaser">                    
<div class="teaser1"> </div>
<div class="teaser2"></div>
 <div class="teaser3"></div>
</div>