サイトバーを追従させてフッター直前で止めたいのですが、やり方がよくわかりません。
制作実績のページなのですが、現在の仕様だとまず普通に開くとフルスクリーンでタイトルが書かれています。
そして下にスクロールするとサイドバーがあるのですが、途中まではついてくるのですがある一定進むと上に戻ってしまいます。
これをずっと追従するようにしたのですが、次はサイドバーがフッターに被ってしまい見えづらくなってしまいます。
変更前のサイドバーが上に戻るタイプのjsはこのようになっています。
js
1 2// 3// Works Detail Menu ------------------------------ 4// 5 6// jQuery(document).ready(function($){ 7$(document).ready(function(){ 8 var id_name = $('body').attr("id"); 9 10 if (id_name == 'Works_Detail'){ 11 var $win = $(window), 12 $main = $('main'), 13 $summary = $('#works_detail_summary'), 14 $header = $('#works_detail_header'), 15 navHeight = $summary.outerHeight(), 16 navPos = $summary.offset().top, 17 footerHeight = $('footer').outerHeight(), 18 hdrDetailHeight = $('#works_detail_header').outerHeight(), 19 ftrDetailHeight = $('#works_detail_footer').outerHeight(), 20 ltsWorksHeight = $('#latest_works').outerHeight(), 21 ftrAreaHeight = footerHeight + ftrDetailHeight + ltsWorksHeight, 22 docmentHeight = $(document).height(), 23 fixedClass = 'is-fixed', 24 hideClass = 'is-hide'; 25 26 $win.on('load scroll', function() { 27 var value = $(this).scrollTop(); 28 scrollPos = $win.height() + value; 29 if ( value > navPos ) { 30 31 32 if ( docmentHeight - scrollPos <= ftrAreaHeight ) { 33 $summary.addClass(hideClass); 34 } else { 35 $summary.removeClass(hideClass); 36 } 37 38 39 $summary.addClass(fixedClass); 40 } else { 41 $summary.removeClass(fixedClass); 42 } 43 44 45 if ( value > hdrDetailHeight ) { 46 // changeBlack(); 47 $('body').addClass('is-black'); 48 } else { 49 // changeWhite(); 50 $('body').removeClass('is-black'); 51 } 52 }); 53 } 54}); 55 56
ここから
if ( docmentHeight - scrollPos <= ftrAreaHeight ) {
$summary.addClass(hideClass);
} else {
$summary.removeClass(hideClass);
}
を消したらサイドバーが全てついてくるようになりましたが、フッターに被ってしまいます。
足りない情報などありましたらご指摘ください( ; ; )
大変お手数ですが、回答よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー