0

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をセットアップしましたが、この影響を防ぐことができるのでしょうか?

4

1 に答える 1

1

スクロール スロットルを 0 に設定することで改善できますが、まだ小さな跳ね返りがあります。

$.waypoints.settings.scrollThrottle = 0;

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

于 2012-12-05T22:10:40.497 に答える