Versuch, einen Versatz zu erstellen, um das Navigationsmenü auf der Bildlaufposition 100px ein- / auszublenden. Es ist Navigation ein- / ausblenden in einer Mausrolle, ich habe lastScroll = 0 auf lastScroll = 100 gesetzt, aber es funktioniert nicht.

Jquery: Fiddle

// Script
lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

HTML:

<div class="nav">
Sticky top navigation bar
</div>
<div class="wrap">
<h3>Some filler text</h3>
Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger.
Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.
</div>

So zeigen Sie die Navigation in der Maus-Bildlaufposition 100px an / aus. Beispiel Geige.
Ich meine, es wird nur das Navigationsmenü angezeigt, wenn Sie nach oben scrollen und es auf die richtige Weise geschieht. Aber ich möchte nach dem Scrollen Seite 100px anzeigen, bedeutet nicht richtig zeigen, will nach 100px Seite scrollen zeigen und verstecken.


Vielen Dank im Voraus.

1
Aariba 16 Aug. 2015 im 16:30

3 Antworten

Beste Antwort

Bitte schön. Übrigens macht medium.com das ziemlich gut. Sie haben sogar einen Beitrag darüber geschrieben, wie sie es gemacht haben. Vielleicht möchten Sie es ausprobieren, falls Sie Ihre Lösung wirklich aufpolieren möchten:

https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

var lastScroll = 0;
var scrollUpStart = 0;
$(window).on('scroll',function() {

    var scroll = $(window).scrollTop();
    if(scroll === 0){
        // we are at the top
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll > scroll) {
        // we are scrolling up

        // we check if we have started scrolling up already
        if (scrollUpStart < scroll) {
            // if we just started scrolling up, we set 
            // the scrollUpStart to the current scroll value
            scrollUpStart = scroll;
        }

        // if we continue scrolling up, the difference between 
        // scrollUpStart and scroll will eventually reach a 100px
        if (scrollUpStart - scroll > 100) {
            $(".nav").addClass("darkHeader");
        }

    } else {
        // we are scrolling down
        // reset scrollUpStart
        scrollUpStart = 0;
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});
2
dangor 16 Aug. 2015 im 14:57

Dieser JS sollte funktionieren :)

Javascript

$(window).on('scroll',function() {
    var scroll = $(window).scrollTop();
    if(scroll >= 100){
        $('.nav').fadeOut();
    } else {
        if(!$('.nav').is(":visible")){
            $('.nav').fadeIn();
        }
    }
});

http://jsfiddle.net/9fbr320y/16/

1
Sofiene Djebali 16 Aug. 2015 im 13:41

Das $(window).scrollTop() gibt den Bildlaufbetrag von oben in Pixel zurück. Schreiben Sie also einfach:

$(window).on('scroll',function() {    
    console.log($(window).scrollTop());
    var scroll = $(window).scrollTop();
    if(scroll > 100){
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    } 
});
1
Odai Alali 16 Aug. 2015 im 13:44