PCでは一定距離スクロール後にヘッダーが固定されるものを実現できたのですが、SPで同じようにしようとすると、タッチの関係上カクカクした動きになってしまいます。
実現したい動きは
キナリノのヘッダーのようななめらかなものです。
Javascript
1jQuery(function() { 2 var main = $('.l-container'); 3 var nav = jQuery('#js-scroll'); 4 5 // メニューのtop座標を取得する 6 var offsetTop = nav.offset().top; 7 8 var floatMenu = function() { 9 // スクロール位置がメニューのtop座標を超えたら固定にする 10 if (jQuery(window).scrollTop() > offsetTop) { 11 main.addClass('l-container--fixed'); 12 } else { 13 main.removeClass('l-container--fixed'); 14 } 15 } 16});
そこで
javascript
1jQuery(function() { 2 var main = $('.l-container'); 3 var nav = jQuery('#js-scroll'); 4 5 // メニューのtop座標を取得する 6 var offsetTop = nav.offset().top; 7 8 var floatMenu = function() { 9 // スクロール位置がメニューのtop座標を超えたら固定にする 10 if (jQuery(window).scrollTop() > offsetTop) { 11 main.addClass('l-container--fixed'); 12 } else { 13 main.removeClass('l-container--fixed'); 14 } 15 } 16 jQuery(window).scroll(floatMenu); 17 jQuery('body').bind('touchmove', floatMenu); 18});
jQuery('body').bind('touchmove', floatMenu);
を利用したのですが、こちらも反応なしのようで…
どのように変更または、改善したらよいでしょうか。アドバイスを頂けると幸いです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。