お世話になります。
スクロールの現在位置を測定し、ある一定の位置でフッターを固定するスクリプトとHTMLを作成したのですが、
スマートフォンでのchromeの表示の挙動がおかしくなってしまい、ご相談させていただいております。
PCでは狙った位置でぴったりフッターがとまるのですが、スマートフォンですと、固定位置でガクガクと上下に動いて固定されなくなってしまいます。
要素検証でみてみると、止まってほしいスクロール位置付近で position: inherit;とposition: feixed;を行ったり来たりしているのですが、それが原因でしょうか…?
拙い説明で申し訳ございませんが、何卒よろしくお願いいたします。
js
1 $(function() { 2 hoge = $(window).height(); 3 fixedblock = $('.footer-fixed'); 4 appear = false; 5 $(window).scroll(function () { 6 7 if ($(this).scrollTop() > 100) { 8 if (appear == false) { 9 appear = true; 10 fixedblock.stop().animate({ 11 'bottom': '0' 12 }, 300); 13 } 14 } else { 15 if (appear) { 16 appear = false; 17 fixedblock.stop().animate({ 18 'bottom': '-60px', 19 }, 300); 20 } 21 } 22 if (!$('body').hasClass('lp')) { 23 if ($('#footer').offset().top <= hoge + $(this).scrollTop()) { 24 fixedblock.css({ 25 'position': 'inherit' 26 }); 27 } else { 28 fixedblock.css({ 29 'position': 'fixed', 30 }); 31 } 32 } 33 }); 34 });
html
1<div class="fixed sp footer-fixed" > 2 <a class="pageTop" href="#page-top"></a> 3 <div class="fixedLogo"> 4 <div class="fixedLogoInner">ロゴや番号など</div> 5 </div> 6</div> 7<footer id="footer"> 8 <div class="footerbox clearfix"> 9 ロゴ画像 10 </div> 11 <p class="copy">コピーライト</p> 12</footer>
あなたの回答
tips
プレビュー