防止閃轉換到位置時的含量/彈跳：固定

Question

我使用了jQuery路點庫修改菜單欄容器的位置從靜態到固定的。當瀏覽器窗口向下滾動到菜單欄時，該欄固定在窗口的頂部。

當慢慢滾動/過去的航點，狀態變化似乎平穩發生的，但是當我用正常的速度滾動，輕微的跳/彈跳發生到菜單欄的內容。

標記：

<div class="wrapper"> 
    <div class="less"></div> 
    <div class="container"> 
    <nav> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Contact Us</a></li> 
     </ul> 
    </nav> 
    </div> 
    <div class="more"></div> 
</div>​ 

相關CSS：

.container { 
    height: 50px; 
} 
nav { 
    background: #cdce12; 
    height: 50px; 
} 
nav ul { 
    margin: 0; 
    padding: 0; 
} 
nav li { 
    display: inline-block; 
} 
.sticky nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

這裏是jQuery代碼：

$(function() { 
    var $container = $('.container'); 
    var $b = $('body'); 
    $container.waypoint({ 
    handler: function(event, direction) { 
     $b.toggleClass('sticky', direction === 'down'); 
     event.preventDefault(); 
    } 
}); 
});​ 

我已經建立了一個JSFiddle來說明這個問題，我不知道有可能防止這種情況發生？

Answer 1

你可以把它的滾動油門設置爲0更好，但是仍然有一個小反彈。

$.waypoints.settings.scrollThrottle = 0; 

http://jsfiddle.net/FHvha/3/