ユーザーがページを下にスクロールしたときに、画面上部の固定位置にセカンダリ ナビゲーション バーを設定したいというのが私の目標です。
私のスクリプトも簡単です:
var stickySubnavTop = $('#subnav').offset().top;
var stickySubnav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickySubnavTop-28) {
$('#subnav').addClass('sticky');
} else {
$('#subnav').removeClass('sticky');
}
};
stickySubnav();
$(window).scroll(function() {
stickySubnav();
});
すべてのデスクトップ ブラウザーで魅力的に機能しますが、iOS ではそれほど機能しません。さて、ここに問題があります.スクロール時にiOSがDOMをフリーズすることを十分に認識しています。それにもかかわらず、効果の急激さを軽減する方法があれば知りたい.
答えを探していると、よく知らないタッチ イベントがいくつか見つかりました。特にtouchmove
リスニング イベントが私の注意を引いたので、それを使ってスクリプトを実行できると考えました。
$(document).on('touchmove', function() {
stickySubnav;
});
これは、ユーザーが画面に指を置いたままスクロールしたときにスクリプトを実行することです。慣性でスクロールを起動すると機能しませんが、ページのコンテンツにより、ユーザーがすばやくスクロールする可能性が低くなるため、効果をよりスムーズにするのに十分です。
問題は、そのスクリプトをこのように実行すると、古い携帯電話でスクロールが少し不安定になることです。A5 クラスのプロセッサは問題なく処理できることがわかりましたが、それほど強力でないプロセッサでは、完全にスムーズなスクロール エクスペリエンスを維持しながら処理することはできません。
私の質問は次のとおりです。そのスクリプトを X ミリ秒ごとに 1 回だけ実行するように指示する方法、またはエクスペリエンス全体のイライラを軽減する他の方法はありますか?
ありがとう