js光棍棒導航

我有一個問題，但我其實不知道如何問。js光棍棒導航

我試圖在順利通過一個點時將導航欄粘在上面。

我參考是這樣的 - >http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

我的問題是，當我使用IE 或Chrome檢查一下，有一個「眨眼」的效果。

它更像是滾動功能將完成滾動過點後的過程。所以Nav之後的東西（HTML）會在0.1〜0.3秒的時間內位於Nav的頂部，然後滾動功能將完成處理。即使通過也很短，但通過導航時的HTML可視化。

不過，如果我使用火狐檢查一下，有沒有這樣的效果眨眼.....

請問什麼是我在這裏得到了問題？我應該檢查什麼？

我的設置是在Nav，Nav z-index = 99之前的一個Anchor，並且滾動函數的內部在下面。

  $(this).scrollTop() > $(anchor).offset().top 
      ? nav.addClass('sticky') 
      : nav.removeClass('sticky')

來源

2013-02-02 Till

Firefox的默認啓用的平滑滾動選項，觸發滾動事件很多次，每次滾動而僅鉻1-2觸發滾動事件，就是其中之一，在默認尖銳滾動結束。 –

@FabrícioMatté非常感謝，如果是這樣，我該如何改進？當我使用Chrome或IE查看參考示例時，他們只是工作正常......我怎麼能做到這一點？ – Till

由於事件觸發更多的是瀏覽器方面，所以這可能不容易解決。將嘗試一些技巧來檢查。 –

jQuery(document).ready(function($) { 

    var my_nav = $('.navbar-sticky'); 
    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = my_nav.offset().top; 

    // our function that decides weather the navigation bar should have "fixed" css position or not. 
    var sticky_navigation = function(){ 
     var scroll_top = $(window).scrollTop(); // our current vertical position from the top 

     // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative 
     if (scroll_top > sticky_navigation_offset_top) { 
      my_nav.addClass('stick'); 
     } else { 
      my_nav.removeClass('stick'); 
     } 
    }; 

    var initio_parallax_animation = function() { 
     $('.parallax').each(function(i, obj) { 
      var speed = $(this).attr('parallax-speed'); 
      if(speed) { 
       var background_pos = '-' + (window.pageYOffset/speed) + "px"; 
       $(this).css('background-position', 'center ' + background_pos); 
      } 
     }); 
    } 

    // run our function on load 
    sticky_navigation(); 

    // and run it again every time you scroll 
    $(window).scroll(function() { 
     sticky_navigation(); 
     initio_parallax_animation(); 
    }); 

});

來源

2015-09-01 15:38:43

回答

相關問題