jQuery Waypoints プラグインを 1 ページの Web サイトの固定メニューと組み合わせて使用しました。メニューは上下の矢印で構成されています。ウェイポイントが渡されると、jQuery を使用して上下の矢印のリンクを次または前のページに変更します。ボタンが押されると、jQuery スクロールを使用してそのページにスクロールします。これはかなりうまく機能し、jQuery ウェイポイントがこのように使用されているのを見たことがあるかどうかはわかりません。素晴らしいプラグインをありがとう！
ただし、サイトを完全にレスポンシブにしようとしていますが、ウェイポイント情報の更新であると思われる問題が 1 つあります。ウィンドウのサイズを変更しても、ページの高さ (ウェイポイントの定義時に計算されます) は変化しません。これにより、不適切なスクロール距離が発生します。
私は学生で、私のコードは少し乱雑で、おそらく少し非効率的ですが、私のサイトのベータ版はここで見ることができます: http://beta.kyleboulay.com
繰り返しますが、明確にするために、ページが最初にロードされた後にウィンドウのサイズを変更すると問題が発生し、距離が適切に再計算されません。
編集：ウェイポイントのオフセット値を50％に変更することで、問題をある程度修正したようです。ただし、ウィンドウのサイズ変更時にウェイポイントの再定義をトリガーする方法を知っておくとなお良いでしょう。
どんな助けでも大歓迎です！ありがとう。
以下は私のコードの例です。
ウェイポイントを次のように定義します。
//first get all the pages // this returns my six pages
sections = $(".pages");
//then define what happens as each waypoint is passed, depending on the direction**
$(sections[5]).waypoint({
handler: function(event, direction){
//console.log('5');
distanceDown = $(sections[5]).offset().top;
distanceUp = $(sections[4]).offset().top;
if(direction==='up'){
//console.log('5 up');
distanceDown = $(sections[5]).offset().top;
distanceUp = $(sections[3]).offset().top;
}
},
offset: '50%'
});
//then when the down or up button is pressed on the menu, i do the following:
$('#icon-up').click(function(){
$('html, body').animate({ scrollTop: distanceUp }, { duration: slideSpeed, easing: 'swing' });
});//end inline