Javascript/jQuery - Navigation blendet sich erst beim Runterscrollen ein

[dn3d_fanboy]

Hallo Leute,

ich suche ein Tutorial oder ein Script, mit dem ich die Navigation einer Seite erst beim Runterscrollen einblenden lassen kann.

Der Besucher soll die Navigation also am oberen Rand sehen, wenn er z.B. 500px nach untengescrollt hat.

Leider habe ich bei Google ichts passendes gefunden, bzw. weiß ich auch nicht genau wonach ich suchen soll.

Vielleicht kann mir hier jemand helfen.

Besten Dank im Voraus.

 

[Curanai]

Eimal jQuery zum Mitnehmen ... voila!

$(window).scroll(function(){
  if( $(this).scrollTop() > 500){
    $('#deineNavigation').show(); 
  } else {
    $('#deineNavigation').hide();
  }
});

Die ID "deineNavigation" ist dann Dein Konstrukt aus nav, div, li o. ä., welches Du bei Seitenaufruf via CSS auf "display:none" setzt. Die Positionierung - damit immer oben bspw. - ist "fixed".

Das ist schon alles ... zumindest glaube ich das ...

Probier mal - das ist jetzt hier im Editor entstanden. ^^

 

[dn3d_fanboy]

Eimal jQuery zum Mitnehmen ... voila!

$(window).scroll(function(){
  if( $(this).scrollTop() > 500){
    $('#deineNavigation').show();
  } else {
    $('#deineNavigation').hide();
  }
});

Die ID "deineNavigation" ist dann Dein Konstrukt aus nav, div, li o. ä., welches Du bei Seitenaufruf via CSS auf "display:none" setzt. Die Positionierung - damit immer oben bspw. - ist "fixed".

Das ist schon alles ... zumindest glaube ich das ...

Probier mal - das ist jetzt hier im Editor entstanden. ^^

Vielen Dank Curanai,
genau das ist es, was ich suchte. Ich bin leider, was JS angeht, ein totaler Neuling, deshalb gleich die nächste Frage:
Wie bekomme ich es jetzt hin, dass das Menü ein- und ausgefadet wird? Oder kann ich dass mit CSS machen?

 

[Myhar]

Indem du das anstelle von show/hide verwendest.
Auch kannst du die Klasse mit jQuery togglen und den Effekt dann per CSS realisieren, wie du möchtest.

 

[dn3d_fanboy]

Indem du das anstelle von show/hide verwendest.
Auch kannst du die Klasse mit jQuery togglen und den Effekt dann per CSS realisieren, wie du möchtest.

Danke Myhar,
ich habe es jetzt mal versucht einzufügen. Leider wird so das Menü ständig ein- und wieder ausgeblendet.

Hier mal der Code:

<script>
        $(window).scroll(function(){
          if( $(this).scrollTop() > 200){
            $('#scroll-load').fadeToggle( "slow", "linear" );
          } else {
            $('#scroll-load').fadeToggle( "slow", "linear" );
          }
        });
    </script>

 

[dn3d_fanboy]

Ok,
ich Rindvieh hab´s gerade selbst herausgefunden :

    <script>
        $(window).scroll(function(){
          if( $(this).scrollTop() > 200){
            $('#scroll-load').fadeIn( "slow", "linear" );
          } else {
            $('#scroll-load').fadeOut( "slow", "linear" );
          }
        });
    </script>

Jetzt läuft es wie gewollt.

 

[Myhar]

Stimmt, mit fade-toggle wird bei jedem Scrollen ein- und ausgeblendet, sry. Aber ja, mit fadeIn, fadeOut ist es natürlich gelöst.

 

[Curanai]

Wenn Du fadeToggle() "unbedingt" nehmen würdest wollen, fragst ab, ob eine gesetzte Pseudo-Klasse gesetzt ist, die nach Option "complete", "done" oder "always" an #scroll-load gesetzt wird. Hier würde sich dann via Chaining .has() anbieten. Aber so, wie Du es jetzt gelöst hast, ist es um einiges übersichtlicher.

 

[Myhar]

Nachdem die fadeToggle Funktion von jQuery wohl intern auch nur abwechselnd fadeIn-fadeOut aufruft, wäre die von dir vorgeschlagene Lösung ein overkill.

 

[Curanai]

Es ging nur um die Unterbindung eines Dauer-fadeToggle(). Pseudo-Klasse (ohne CSS etc.) setzen und schon macht er das nur 1x - jeweils. Kannst sonst auch data-* nehmen (die kleinen Biester liebe ich).

Dass das 'ne Kanone auf 'nen Spatz war, weiß ich ... daher steht da ja "wenn Du 'unbedingt'".