html
1<div class="banner-wrap"> 2 <p class="banner"><a href=""><img src="http://placehold.it/250x400/" alt=""></a></p> 3</div>
css
1.banner { 2 position: absolute; 3 top: 0; 4} 5.banner a { 6 margin-top: 250px; 7}
js
1 $(function() { 2 $(window).scroll(function() { 3 if ($(window).scrollTop() > 250) { 4 $('.banner').css('position', 'fixed'); 5 $('.banner').css('top', '-250px'); 6 } else { 7 $('.banner').css('position', 'absolute'); 8 $('.banner').css('top', '0'); 9 } 10 }); 11 }); 12
スクロールの位置が250pxの間は、bannerが上に250px空けてabsolute状態にあります。
スクロールの位置が250pxを越えると、fixedになり、ページ上部に固定されて吸着します。
ここまでは、このjsで動作していますが、スクロールがフッター部に来た時、フッターにbannerが被らずに、フッターの上20pxでbannerが固定されるようにしたいのですが、jsがわかりません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/29 08:08
2018/01/29 08:22
2018/01/29 08:51
2018/01/29 08:57
2018/01/29 09:19
2018/01/29 09:21
2018/01/30 01:06
2018/01/31 01:59