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

Question

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

我有一个粘性面板，当您开始向下滚动时它会固定，然后在页脚出现时停止。或者至少我愿意。您可以在演示中看到粘滞的一边越过页脚。

我尝试了多种方法，一次使用 jQuery 出现插件： 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 使 side 元素粘在容器底部。

在朋友的帮助下，我也尝试了这个，它不依赖于 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');
                }
   }
});

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

Answer 1

我在这里做了类似的事情。我认为您希望offset()确定元素相对于文档的位置。此外，positionToReach将通过offset().top页脚。