固定的侧边栏由页脚向上推 [英] Fixed sidebar pushed up by footer

问题描述

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

I have found dozens of questions regarding the fixed sidebar. My problem is that the sidebar shouldn't be fixed once the footer enter the viewport. You can see this exact same behavior on Gather.Ly or Trek Factory Racing page.

我认为他们的解决方案只是简单地将侧边栏保持固定，而是通过视口中可见的页脚像素数来推动(页边距).

I assume their solution is simply kept the sidebar fixed, but rather pushed (margin-top) by number of footer pixels visible in the viewport.

我的布局

两个div的100％包装器.一种用于内容，另一种具有100％高的图像.包装后，我的页脚宽度为100％.

100% wrapper with two divs. One for content and one with 100% height image. After the wrapper I have 100% width footer.

我猜我唯一可能的解决方案是jquery?您能帮我提供代码吗?我似乎有点迷路了...

I guess my only possible solution will be jquery? Can you help me with the code? I seems to be little lost...

推荐答案

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

You can use JavaScrip to check whether the footer is in the viewport (the area you can see) or not. You can search for how to do that here on Stack Overflow, or use jQuery and this plugin: http://www.appelsiini.net/projects/viewport

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

Your code could look similar to this (if you use the plugin I mentioned):

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

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

希望这能回答您的问题！

Hope this answers your question!

这篇关于固定的侧边栏由页脚向上推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！