jquery 在滚动时固定侧边栏，直到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21447947/
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
jquery fixing a side bar while scrolling, until bottom
提问by Francis Chibaye
This code is taken from waypointarts.com and it's suppose to create a Fixing a side bar while scrolling, until bottom. problem is when right div is populated the left div's height even though set to 100# stay fixed to certain height, window/screen or something. how can I set it so its 100% height or equivalent to right div's height.
此代码取自 waypointarts.com，它假设在滚动时创建一个固定侧栏，直到底部。问题是当右 div 填充左 div 的高度时，即使设置为 100# 保持固定在特定高度、窗口/屏幕或其他东西。我怎样才能将它设置为 100% 高度或相当于右 div 的高度。
HTML Header
HTML 标题
<div id="wrapper">
<div id="left">
<div id="sidebar">
Sidebar Content
</div>
</div>
<div id="right">
This is the text of the main part of the page.
</div>
<div class="clear"></div>
</div>
<div id="footer">Footer</div>
CSS
CSS
#header {
background: #c2c2c2;
height: 50px
}
#wrapper {
width: 500px
}
#left {
background: #d7d7d7;
position: absolute; /* IMPORTANT! */
width: 150px;
height: 100%
}
#right {
position: relative;
width: 350px;
float: right
}
#sidebar {
background: #0096d7;
width: 150px;
color: #fff
}
.clear {
clear: both
}
#footer {
background: #c2c2c2
}
JAVASCRIPT
爪哇脚本
$(document).ready(function () {
var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#sidebar').height() + 'px';
if (scroll < $('#left').offset().top) {
$('#sidebar').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('#sidebar').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('#sidebar').css({
'position': 'fixed',
'top': '0',
'height': height
});
}
});
});
Image from waypoitsarts.com:
图片来自waypoitsarts.com：
采纳答案by Mark S
I think your script is working fine, probably the problem is on your CSS. In order to properly containa position:absolute;element you should set its parent element ('#wrapper') to position:relative.
我认为您的脚本运行良好，可能问题出在您的 CSS 上。为了正确包含一个position:absolute;元素，您应该将其父元素 ( '#wrapper') 设置为position:relative.
See the demo on this jsfiddle: jsfiddle.net/J62Cp/
请参阅此 jsfiddle 上的演示：jsfiddle.net/J62Cp/
回答by UTAlan
I have a similar setup. I needed a "sticky" div that started at the top of the content section (300px below the top of the page, due to the header), was fixed while I scrolled down, but stopped when I got to a certain point (the footer). With pure CSS, the sticky div was going behind my footer after I got to the bottom. Your code got me going in the right direction, but here's the changes I made for my use case:
我有类似的设置。我需要一个从内容部分顶部开始的“粘性”div（由于标题，页面顶部下方 300 像素），在我向下滚动时固定，但在我到达某个点时停止（页脚）。使用纯 CSS，在我到达底部后，粘性 div 会在我的页脚后面。您的代码让我朝着正确的方向前进，但这是我为我的用例所做的更改：
$(document).ready(function () {
var length = $("#left").height() - $("#sidebar").height();
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#sidebar').height() + 'px';
if(scroll <= 0) {
$("#sidebar").css({
'position': 'absolute',
'top': '0'
});
} else if(scroll >= length) {
$("#sidebar").css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$("#sidebar").css({
'position': 'fixed',
'top': '300px'
});
}
});
});
回答by Raajen
Do you want fixed positioned sidebar or sidebar with height = to main content part???? if you want height of sidebar equals to main content part, then this may help you..
你想要固定定位的侧边栏或侧边栏高度 = 到主要内容部分？？？？如果您希望侧边栏的高度等于主要内容部分，那么这可能对您有所帮助..
$(function(){
var mainHeight = $('.right').height();
$('.left').css({
'height':mainHeight
});
});
