3

html 要素と body 要素のサイズを 100% の幅と高さに設定overflow: scrollし、body を配置して全画面スライド要素を作成する Web アプリケーションがあります。スティッキー ナビゲーションにjQuery Waypointsを使用し、現在どのスライドが表示されているかを判断しています。

body 要素は技術的には 1 つのスクロールなので、 を設定しcontext: bodyます。これは Firefox では期待どおりに機能しますが、Chrome または Safari ではウェイポイントが起動しません。

ウェイポイントが発射されるべきポイントまでスクロールした後に手動で呼び出してウェイポイントを発射させることができますが、$.waypoints('refresh');すべてのスクロールイベントの後にこれを呼び出すのは非常に面倒な解決策のようです。

$('body').on('scroll', function(){$.waypoints('refresh');})—それは機能しますが、確かにきれいではありません。

これは、各ブラウザーが DOM を解釈する方法と関係があると思いますが、Chrome と Safari がスクロール可能な要素のウェイポイントでうまく動作しない既知の理由はありますか?

ウェイポイントの使用で逆に行ったこと、または根本的な問題が何であるかのいずれかを探しているので、それを修正してウェイポイントをすべての人に適切に機能させることができます。

記録のために (そして誰かが尋ねる前に)、私は調査を行いましたが、これは固定要素の問題ではありません。

編集：ついにこれのために構築されたCodePenを手に入れました。見てください。

4

4 に答える 4

1

overflow:hiddenhtml から削除します。残念ながら、これは必須のようです。レイアウトが崩れないことを願っています。

次に、スティッキー ヘッダーの#nav.stuck { position: fixed; }代わりに必要になります。absolute

この js を使用します。

$('#nav').waypoint(function(direction) {
  if (direction == 'down') {
          $(this).addClass('stuck');
        } if (direction == 'up') {
          $(this).removeClass('stuck');
        };
});

それは私にとってはうまくいきます-http://codepen.io/anon/pen/GgsdHを参照してください

于 2013-11-06T17:33:02.753 に答える
0

html と body のオーバーフローと高さを削除します。コンテキストも必要ありません。私のために働いた。

于 2015-02-04T16:29:27.757 に答える