当其他元素进入视图时，将 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

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