Question

我使用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来说明问题，我想知道是否可以防止这种影响发生？

Answer 1

你可以通过将滚动油门设置为0来使其更好，但是仍然有一个微小的反弹。

$.waypoints.settings.scrollThrottle = 0;

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

转换到位置时，防止内容闪烁/反弹：固定

1 个答案: