固定侧边栏被页脚向上推

Question

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

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

我的布局

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

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

Answer 1

您可以使用 JavaScrip 检查页脚是否在视口中（您可以看到的区域）。你可以在 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;
    };
}

希望这能回答你的问题！