粘贴侧边栏仅在侧边栏底部位于窗口底部时粘住

我有一个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); }); 

Answer 1

我希望我做对了，当侧边栏的底部进入视图，然后坚持？

我在侧边栏的底部（侧边栏内）创建了另一个div。 当它出现时，它会坚持下去。

http://jsfiddle.net/Z9RJW/10/

 
 //inside the sidebar 

并在js

 $(function () { var headlineBarPos = $('.headlineBar').offset().top; // returns number var moduleControllerPos = $('.moduleController').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 (moduleControllerPos < windowTop + windowHeight) { $('.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); 

}）;

我希望它有所帮助。

Answer 2

就像是：

 if (sidebar.top + sidebar.height < window.scrolltop + window.height) { // set sticky } 

并设置粘性需要考虑侧边栏可能高于视口，因此：

 sidebar.top = sidebar.height - window.height // this will be a negative number