我在网站加载后就开始工作了。页脚在底部。然后,当您滚动到内容时,它会滚动到顶部。然后当它到达顶部时,它会将(持久性标题)粘在顶部以进行站点导航。这一切都有效。
问题是,当我滚动回到顶部时,我希望页脚再次“粘”到底部。现在它最终会出现在浏览器底部的上方或下方,具体取决于显示器。
我已经通读了为类似主题提供的答案,它们解决了页脚粘在底部的问题,我需要的是一旦用户向后滚动到网站顶部附近,它就会“粘”回底部。
有人可以帮我完成这个吗?
这是测试站点的位置,只需滚动即可显示我的问题。
http://jsfiddle.net/billy_comic/AQrsf/
$(function(){
var stickyRibbonTop = $('#main-nav').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#main-nav').css({position: 'fixed', top: '0px'});
} else {
$('#main-nav').css({position: 'static', top: '0px'});
}
});
});
非常感谢任何帮助。
B
最佳答案
如果从假设用户的窗口高度不会改变开始,就可以确定页脚的最小 y 位置。
然后,当用户滚动到该位置上方时,您可以将页眉/页脚的位置从固定位置(在 y = 0
)更改为绝对位置(在 y = window_height - header_footer_height
).
在此基础上扩展,如果窗口高度发生变化,您也可以更新位置。
关于javascript - 当网站顶部为 "stick"时,如何将页脚 "near"置于底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22465380/