jquery - 修复了由页脚向上推的侧边栏

Question

我发现了很多关于固定边栏的问题。我的问题是，一旦页脚进入视口(viewport)，侧边栏就不应固定。您可以在 Gather.Ly 或 Trek Factory Racing 页面上看到完全相同的行为。

我假设他们的解决方案只是保持侧边栏固定，而是按视口(viewport)中可见的页脚像素数插入(边距顶部)。

我的布局

带有两个 div 的 100% 包装器。一个用于内容，一个具有 100% 高度的图像。在包装器之后，我有 100% 宽度的页脚。

我想我唯一可能的解决方案是 jquery？你能帮我看看代码吗？我好像有点迷路了...

Answer 1

您可以使用 JavaScrip 检查页脚是否在视口(viewport)(您可以看到的区域)中。您可以在 Stack Overflow 上搜索如何执行此操作，或使用 jQuery 和此插件:http://www.appelsiini.net/projects/viewport

您的代码可能类似于此(如果您使用我提到的插件):

$(window).scroll(function()
{
   if ( $('.footer:in-viewport').exists() ) {
      $('.sidebar').css('position','static');
   }
});

if (jQuery){
    jQuery.fn.exists = function() {
        return this.length>0;
    };
}

希望这能回答您的问题!