###前提・実現したいこと
webサイトのサイドバーの一部をスクロールした際に途中からついてきて、また途中で離れる機能をつけたいです。
以下のサイトの「シェアしてね♪」の箇所のような感じです。
(http://techmemo.biz/javascript/scroll-halfway-through-content/)
特徴としては
・実装したい要素のheightが長いこと
・長いひとかたまりで、この塊ごと途中からついてきて欲しい(塊の最上部から)
・さらに途中(塊の下層部がfooterと被らない位置)で、ついてくるのをやめて、そのままスクロールできるようにしたい
(参考サイトの「シェアしてね♪」が途中で止まるイメージです。)
・記事が200くらいあるサイトなので、scrollTopの長さはページごとに変わります
###発生している問題・エラーメッセージ
現状としては、「スクロールした際に途中からついてくる」箇所はクリアしましたが、
途中で離れ、そのままスクロールする方法がわかりません。現状、css("position","absolute")にしているため元の位置に戻ってしまいます。
###該当のソースコード
JavaScript
1<script type="text/javascript"> 2 var setBoxId = '#float-box'; 3 var initOffsetTop = null; 4 $(document).ready(function() { 5 initOffsetTop = $(setBoxId).offset().top; 6 }); 7 $(window).scroll(function() { 8 scrollbox(); 9 }); 10 function scrollbox(){ 11 if(initOffsetTop == null) return; 12 var scrollTop = $(document).scrollTop(); 13 var scrollBox = $("#float-box").height(); 14 var leftHeight = $(document).height() - $(document).scrollTop(); 15 var key = leftHeight - scrollBox; 16 17 if(initOffsetTop < scrollTop && key > 300) { 18 $(setBoxId).css('position', 'fixed'); 19 $(setBoxId).animate({top: '10'}, {duration: 0}); 20 }else if(initOffsetTop < scrollTop && key < 300){ 21 $(setBoxId).css('position', 'absolute'); 22 $(setBoxId).animate({top: '10'}, {duration: 0}); 23 }else{ 24 $(setBoxId).css('position', 'absolute'); 25 $(setBoxId).animate({top: initOffsetTop}, {duration: 0}); 26 } 27 } 28 29</script>
###試したこと
JavaScriptの実装は初めてです。
該当するブログやサイトを元に、以下のことを追加しました。
・変数leftHeightで、windowのheight+これからスクロールできる合計長さ
・変数keyでleftHeightからターゲットの要素の長さを引いた残りの長さ(footer手前でついてくるのを止めたいため)
###補足情報(言語/FW/ツール等のバージョンなど)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/11 15:32