私は2列のレイアウトを持っています。左の列はサイドバーよりもずっと長いです。サイドバーの下部がブラウザウィンドウの下部に達したときにのみサイドバーを固定したい. したがって、ユーザーは、右側のサイドバーが固定されている間、左側の列のコンテンツを下にスクロールし続けることができます。ここで多くの厄介な質問を見てきましたが、この特定の状況は依然として私を悩ませています. また、左の列に固執する見出しバーがあり、固執することに成功しました。
これは私がjsfiddleで行ったことのデモです!
ここで、私が試している js を簡単に見てみましょう。
$(function(){
var headlineBarPos = $('.headlineBar').offset().top; // returns number
var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();
var totalHeight = sidebarHeight + sidebarTop;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
// fixing the headline bar
if (headlineBarPos < windowTop) {
$('.headlineBar').addClass('sticky').css('top', '0');
}
else {
$('.headlineBar').removeClass('sticky').removeAttr('style');
}
if(sidebarHeight < windowTop) {
$('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
} else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');
}
console.log(windowTop);
});
console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);
});