我使用 jQuery Waypoints 库将菜单栏容器的位置从静态修改为固定。当浏览器窗口向下滚动到菜单栏时,菜单栏固定在窗口的顶部。
当缓慢滚动到/越过航点时,状态变化似乎很顺利,但是当我以正常速度滚动时,菜单栏内容会发生轻微的跳跃/反弹。
标记:
<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来说明这个问题,我想知道是否可以防止这种影响发生?