2015-08-16 75 views
0

這個jQuery顯示導航菜單,當您向上滾動頁面0px(以正確方式)。但試圖在200px之後顯示(在頁面上滾動時),意味着不能正確顯示,在向上滾動頁面時希望顯示並隱藏200px之後。在滾動位置顯示/隱藏導航

的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> 

有什麼建議?示例fiddle
在此先感謝。

回答

0

的我已經找到的方式#One:

// Script 
    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 
      if (scrollUpStart < scroll) { 
       // if we just started scrolling up, we set the 'marker' 
       scrollUpStart = scroll; 
      } 

      if (scrollUpStart - scroll > 200) { 
       $(".nav").addClass("darkHeader"); 
      } 

     } else { 
      scrollUpStart = 0; 
      // we are scrolling down 
      $(".nav").removeClass("darkHeader"); 
     } 
     lastScroll = scroll; 
    }); 

Fiddle :)