2016-08-09 7 views
0

Ich habe eine feste Navigationsleiste, die ausgeblendet wird, wenn ein Benutzer nach unten scrollt; und erscheint, wenn sie nach oben scrollen. Das funktioniert gut. Es ist eine einzelne Seite Scroller-Site.Ermitteln des Benutzer-Scrollings und Klicken auf die Animationsfunktion

Das Problem tritt auf, wenn ein Benutzer auf ein Navigationselement klickt und sie anschließend auf der Seite nach unten scrollen, verschwindet das feste Nav. Ich möchte, dass dies beim Klicken auf das Navigationselement angezeigt wird, bis der Benutzer selbst mit dem Mausrad oder der Bildlaufleiste herunterscrollt.

Meine bisherige Vorgehensweise bestand darin, eine Variable festzulegen, um festzustellen, ob es sich um ein programmatisches Scrollen handelt oder nicht. Ich benutze diese Variable, um festzustellen, ob das Nav als bedingte Anweisung versteckt werden soll oder nicht.

window.programScrolling = false; 

Die Navigationselement-Klickfunktion ist wie folgt, wodurch die Variable auf wahr gesetzt wird.

$('a[href^="#"]:not([href="#"])').on('click',function (e) { 
    e.preventDefault(); 

    var target = this.hash; 
    var $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 500, 'easeInOutCubic', function() { 

     window.programScrolling = true; 

    }); 

}); 

Dieser Code funktioniert tatsächlich. Aber nur einmal wie jetzt ist die Variable immer wahr.

Ich brauche eine Möglichkeit, diese Variable zurück auf false zurückzusetzen, wenn der Benutzer das Scrollen durchführt.

ich versucht habe, auf dem Scroll-Ereignisse Einstellung

$(window).scroll(function(e) { 
    window.programScrolling = false; 
}); 

Aber das scheint Vorrang vor dem Click-Ereignisse zu nehmen und damit diese Variable ist jetzt immer falsch.

Irgendwelche Vorschläge? Oder alternative Ansätze?

+1

haben Sie eine jsfiddle Link? – kasperite

Antwort

1

Wenn von $(window).scroll wird Vorrang nehmen Sie es bedeuten Sekunde aufgerufen, können Sie diesen Code verwenden:

$(window).scroll(function() { 
    if (programScrolling) 
     window.programScrolling = false; 
    else{ 
     //User initiated scroll! 
    } 
});