仅当侧边栏底部位于窗口底部时才会粘贴的粘性侧边栏答案

【问题标题】：Sticky Sidebar that only sticks when sidebar bottom is at window bottom仅当侧边栏底部位于窗口底部时才会粘贴的粘性侧边栏
【发布时间】：2013-09-26 12:29:16
【问题描述】：

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

    });

【问题讨论】：

标签： javascript jquery sticky

【解决方案1】：

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

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

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

<div class="moduleController"></div> //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);

});

希望对你有帮助。

【讨论】：

确实很有帮助。我对您的解决方案做了一个小调整，以获得我正在寻找的行为 - 请参阅 here

【解决方案2】：

类似：

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

并且设置sticky需要考虑到侧边栏可能高于视口，所以：

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

【讨论】：