Jquery 当其他元素进入视图时，向DOM元素添加CSS类

这里有一个现场演示：

我有一个粘滞的面板，当你开始向下滚动时，它是固定的，然后当页脚进入视图时停止。或者至少我愿意。您可以在演示中看到，stucky放在页脚上方

我曾经尝试过多种方法，使用jQuery出现插件：。我写道：

$('footer').on('appear', 'aside', function() {
            $(this).removeClass('fixed_aside').addClass('bottom_fixed_aside');
   });

我创建了一个.bottom\u fixed\u aside类，然后使用display:inline块将aside元素粘贴到容器的底部

在朋友的帮助下，我也尝试了这个不依赖jQuery插件的方法：

$(document).scroll(function(){

    var windowHeight = $(document).height();
    var footerHeight = $(footer).height();
    var positionToReach = windowHeight - footerHeight;
    if( $(document).scrollTop() >= positionToReach ){
         $('aside').removeClass('fixed_aside').addClass('bottom_fixed_aside');
                } else {
         $('aside').removeClass('bottom_fixed_aside');
                }
   }
});

---

它也不起作用。我是不是错过了一些很明显的东西？

我也做了类似的事情。我认为您需要确定元素相对于文档的位置。另外，

positionToReach

将通过页脚的

offset（）.top

。

在代码末尾附近有一个额外的

}

。另外，我假设

$（footer.height（）应该是
$（'footer'）。高度（）。删除它！谢谢你。另外，我将$（footer）更改为$（'footer'）。仍然没有。所以像var footerHeight=$（'footer'）.offset（）.top？这将是页脚偏移位置，而不是高度。您需要监视滚动，当滚动位置+窗口高度达到该偏移位置时，您知道窗口底部已到达页脚。好的，请原谅，我对这一点非常陌生。这个怎么样？var positionToReach=$（'footer'）.offset（）.top；if（$（document）.scrollTop（）>=positionToReach）{$（'aside'）.removeClass（'fixed'u aside'）.addClass（'bottom'fixed'u aside'）；}else{$（'aside'）.removeClass（'bottom'fixed'u aside'）；}