jquery - 当其他元素进入 View 时将 CSS 类添加到 DOM 元素

Question

这是一个现场演示:http://www.lazarogamio.com/sfgn/single_page

我有一个粘性面板，它会在您开始向下滚动时固定，然后在页脚出现时停止。或者至少我希望如此。您可以在演示中看到，stucky aside 覆盖了页脚。

我试过很多方法，一旦使用 jQuery appear 插件:http://morr.github.com/appear.html .我写了这个:

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

我创建了一个 .bottom_fixed_aside 类，然后使用 display:inline-block 使 aside 元素粘在容器底部。

我也在 friend 的帮助下尝试了这个，它不依赖于 jQuery appear 插件:

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

它也没有用。我错过了什么很明显的东西吗？

Answer 1

我做了类似的事情 here .我想你会想 offset()确定元素相对于文档的位置。此外，positionToReach 将位于页脚的 offset().top 处。