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

Question

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

我有一个粘性面板，在您开始向下滚动时固定，然后在页脚进入视图时停止。或者至少我喜欢它。你可以在演示中看到stucky一边翻过页脚。

我曾尝试过多种方式，一旦使用jQuery show plugin：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元素粘贴到容器的底部。

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