- ベストアンサー
jQuery画面スクロールで教えてください
例えば、下記のような画像リンクボタンを <div id="btm"><img src="kotei.jpg" /></div> <div class="main"> ここに本文 </div> <div class="sub"> ここに文章 </div> のmain中をスクロールしている時は上記画像を常に下部に固定したい。 逆にsub以下は画像を消したい（非表示）場合はどうすればよいですか。 完成したタグを教えてください。 よろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ var btm = $("#btm"); var main_height = $(".main")[0].clientHeight; $(window).scroll(function(){ var scr = $(this).scrollTop(); var k = 200; // 調整用定数. 0にするとsubが画面上端に達したときに画像非表示 console.log(scr); if(scr>main_height - k){ btm.addClass("hidden"); }else{ btm.removeClass("hidden"); } }); }); </script> <style> .main, .sub{ height: 100vh; } #btm{ position: fixed; bottom: 0; } .hidden{ display: none; } </style> </head> <body> <div id="btm"><img src="https://cdn.pixabay.com/photo/2017/08/12/17/11/nature-2634729__180.jpg"></div> <div class="main"> ここに本文 </div> <div class="sub"> ここに文章 </div> </body> </html> スクロール量とmainの高さを比較し、btmのclass名を変更することで実現できます。（書くまでもないことかもしれませんが、このサイトの都合上インデントを全角スペースで表現していますので適宜置換してください。）
お礼
ありがとうございます！！！！！！！ そう、これがやりたかったんです＾＾ ググってもなっかなか該当のが出てこず悩んでおりました。 おかげさまで無事にサイト更新できました！ 本当にありがとうございました。心よりお礼申し上げます。