通过页脚推送固定侧栏

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

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

我的布局

100％包装与两个div。一个用于内容，另一个用100％高度图像。包装后我有100％宽度页脚。

我想我唯一可能的解决方案是jQuery？你能帮我解码吗？我似乎有点失落......

来源

2014-09-01 Martin Smejkal

您需要向我们提供一些代码才能帮助您。在这里粘贴你的代码（你现在得到了什么），并做一个小提琴。 – Zemljoradnik 2014-09-01 07:11:26

您可以使用JavaScrip来检查页脚是否在视口（您可以看到的区域）或不。您可以搜索该怎么做，这里对堆栈溢出，或使用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; 
    }; 
}

希望这回答你的问题！

来源

2014-09-01 07:25:20

非常感谢。这实际上工作。我通过切换类来更改脚本，而不是直接更改css。对于我而言它实际上是更好的解决方案，用于弥补保证金要求没有硬性的计算。 – 2014-09-01 08:47:46

很高兴能帮到你！上SO代码始终是一个建议，没有固定的溶液（好，至少常常）。做任何你喜欢的事;） – 2014-09-01 09:01:18

通过页脚推送固定侧栏

回答

相关问题