Javascript 仅当侧边栏底部位于窗口底部时才粘住的粘性侧边栏

我有两列的布局。左列比侧边栏长得多。我只希望侧边栏的底部到达浏览器窗口的底部时才会粘住。因此，用户可以继续向下滚动左侧栏的内容，而右侧栏会粘住。我在这里看到了很多棘手的问题，但这种特殊情况仍然困扰着我。我在左列也有一个标题栏，我已经成功地把它粘在了上面

这是我在中所做的演示

下面是我正在试用的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);

    });

$（函数（）{
var headlineBar pos=$（'.headlineBar'）.offset（）.top；//返回数字
var sidebarHeight=$（'.sticky sidebar wrap'）.height（）；
var sidebarTop=$（'.sticky sidebar wrap'）.offset（）.top；
var windowHeight=$（window.height（）；
var totalHeight=侧边栏高度+侧边栏顶部；
$（窗口）.scroll（函数（）{//滚动事件
var windowTop=$（window）.scrollTop（）；//返回数字
//修正标题栏
如果（标题栏位置<窗口顶部）{
$（'.headlineBar'）.addClass（'sticky'）.css（'top'，'0'）；
}
否则{
$（'.headlineBar'）.removeClass（'sticky'）.removeAttr（'style'）；
}
if（侧边栏高度<窗顶）{
$（'sticky sidebar wrap'）.addClass（'sticky'）.css（'top'，'0'）；
}否则{
$（'sticky sidebar wrap'）.removeClass（'sticky'）.removeAttr（'style'）；
}
控制台日志（windowTop）；
});
控制台日志（headlineBarPos）；
控制台日志（侧边栏高度）；
console.log（sidebarTop）；
});

类似于：

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

---

我希望我没有弄错，当侧边栏的底部进入视图时，然后粘住

我在侧边栏底部（侧边栏内部）创建了另一个div。 当这一点出现在人们的视野中时，它就一直存在

//在侧边栏中

还有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);

$（函数（）{
var headlineBar pos=$（'.headlineBar'）.offset（）.top；//返回数字
var moduleControllerPos=$（'.moduleController'）.offset（）.top；//返回数字
var sidebarHeight=$（'.sticky sidebar wrap'）.height（）；
var sidebarTop=$（'.sticky sidebar wrap'）.offset（）.top；
var windowHeight=$（window.height（）；
var totalHeight=侧边栏高度+侧边栏顶部；
$（窗口）.scroll（函数（）{//scroll事件
var windowTop=$（window）.scrollTop（）；//返回数字
//修正标题栏
如果（标题栏位置<窗口顶部）{
$（'.headlineBar'）.addClass（'sticky'）.css（'top'，'0'）；
}否则{
$（'.headlineBar'）.removeClass（'sticky'）.removeAttr（'style'）；
}
if（模块控制器<窗口顶部+窗口高度）{
$（'sticky sidebar wrap'）.addClass（'sticky'）.css（'top'，'0'）；
}否则{
$（'.sticky边栏包装'）.removeClass（'sticky'）.removeAttr（'style'）；}
控制台日志（windowTop）；
});
控制台日志（headlineBarPos）；
控制台日志（侧边栏高度）；
console.log（sidebarTop）；

}))

---

我希望这会有帮助。

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

<div class="moduleController"></div> //inside the sidebar

$(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);