Question

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

我认为他们的解决方案只是保持边栏固定，而是按视口中可见的页脚像素数推动（margin-top）。

我的布局

100％包装，带有两个div。一个用于内容，一个用于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;
    };
}

希望这能回答你的问题！

固定侧边栏被页脚向上推

1 个答案: