Javascript 使滚动侧边栏停止在页脚处
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35651702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make scrolling sidebar stop at footer
提问by BN83
I'm currently using the following:
我目前正在使用以下内容：
http://jsfiddle.net/0mLzseby/469/
http://jsfiddle.net/0mLzseby/469/
To make my sidebar follow down the page. I have quite a large footer though and I'd like the div to stop when it gets to the footer rather than to keep scrolling.
让我的侧边栏跟随页面。虽然我有一个很大的页脚，但我希望 div 在到达页脚时停止，而不是继续滚动。
The code I currently have is:
我目前拥有的代码是：
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
回答by freedomn-m
You can check if you've scrolled down to the footer, then remove the stickclass:
您可以检查是否已向下滚动到页脚，然后删除stick该类：
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top)
$('#sticky').removeClass('stick');
else if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
(you could combine the if to remove the duplicate .removeClass, here for demonstration)
（你可以结合 if 来删除重复的 .removeClass，这里用于演示）
However, with your css you get a nasty 'jump' around when you start scrolling - in your fiddle, the right content appears below #sticky then when you stick #sticky, the right content jumps to fill the gap. Using the code above, you'll get some race-conditions as the offset() moves when it fills/unfills the gap.
但是，对于您的 css，当您开始滚动时，您会遇到令人讨厌的“跳跃” - 在您的小提琴中，正确的内容出现在 #sticky 下方，然后当您粘贴 #sticky 时，正确的内容会跳转以填补空白。使用上面的代码，当 offset() 在填充/取消填充间隙时移动时，您将获得一些竞争条件。
To fix this gap, just add a float:leftto your #sticky css.
要修复这个差距，只需float:left在 #sticky css 中添加一个。
Updated fiddle: http://jsfiddle.net/0mLzseby/472/
更新小提琴：http: //jsfiddle.net/0mLzseby/472/
I suspect you would like to go one step further and, when you get to the bottom, the div then starts to scroll with the page. You can do this by adjusting the 'position:fixed' top of .stick. Don't forget to reset it when not below the footer:
我怀疑您想更进一步，当您到达底部时，div 开始随页面滚动。你可以通过调整 'position:fixed' 顶部来做到这一点.stick。不要忘记在页脚下方重置它：
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
var padding = 20; // tweak here or get from margins etc
if (window_top + div_height > footer_top - padding)
$('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
else if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky').css({top: 0})
} else {
$('#sticky').removeClass('stick');
}
}
The padding just makes it start scrolling in a more natural place - you can probably get this from other css attributes such as margin and padding of the other components.
填充只是让它在更自然的地方开始滚动 - 您可能可以从其他 css 属性（例如其他组件的边距和填充）中获得它。
Updated fiddle: http://jsfiddle.net/0mLzseby/473/
更新小提琴：http: //jsfiddle.net/0mLzseby/473/
回答by user3134277
You forgot to add class, if we are in the footer, and refrech the page, then, the sidebar won't show :
您忘记添加类，如果我们在页脚中，并刷新页面，则侧边栏将不会显示：
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
var padding = 20; // tweak here or get from margins etc
if (window_top + div_height > footer_top - padding) {
$('#sticky').addClass('stick'); //////// here is to get fixed when we refrech page when we are in the footer
$('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
} else if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky').css({top: 0})
} else {
$('#sticky').removeClass('stick');
}
}
回答by jdnz
This can now be achieved without javascript using position: sticky.
现在可以在不使用 javascript 的情况下使用position: sticky.
Updated fiddle: http://jsfiddle.net/p1gku0mx/3/
更新小提琴：http: //jsfiddle.net/p1gku0mx/3/
The key is to wrap the sticky element in another div. Since the sticky element cannot move outside of its wrapper div it get scrolled up when the footer comes into view.
关键是将粘性元素包装在另一个div. 由于粘性元素不能移动到其包装器 div 之外，因此当页脚进入视图时它会向上滚动。
回答by Krzysztof AN
Youdon't need to use javascript for this. You can do this using CSS only:
您不需要为此使用 javascript。您只能使用 CSS 来做到这一点：
position: sticky;
body{
padding: 0 20px;
}
#content {
height: 1200px;
}
header {
width: 100%;
height: 150px;
background: #aaa;
}
main {
float: left;
width: 65%;
height: 100%;
background: #444;
}
aside {
float: right;
width: 30%;
height: 500px;
position: sticky;
top: 100px;
background: #777;
}
footer {
width: 100%;
height: 300px;
background: #555;
}<body>
<header>Header</header>
<div id="content">
<main>Content</main>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</body>回答by Patel Disha
You can check if you've scrolled down add the sticky class and when you've scroll on footer and header area it will be remove sticky class
您可以检查是否向下滚动添加粘性类，当您滚动页脚和页眉区域时，它将删除粘性类
function Stickyheaderfooterbar() {
var windowTop = jQuery(window).scrollTop();
var footerTop = jQuery(".footer").offset().top - 498;
var stickydivTop = jQuery('#sticky-anchor').offset().top;
var stickydivHeight = jQuery("#sticky").height();
console.log('footer' + footerTop);
console.log('stickydivTop' + stickydivTop);
console.log('stickydivHeight' + stickydivHeight);
console.log('windowTop' + windowTop);
if (windowTop + stickydivHeight > footerTop)
jQuery('#sticky').removeClass('stick');
else if (windowTop > stickydivTop) {
jQuery('#sticky').addClass('stick');
} else {
jQuery('#sticky').removeClass('stick');
}
}
