使用 jQuery 在可见窗口内保持滚动对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5273453/
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
Using jQuery to keep scrolling object within visible window
提问by Laurent Stanevich
I was in the middle of writing up a long description of what I wanted to do, when I realized that the "How To Ask / Format" sidebar box on this very same "Ask A Question" page does exactlywhat I want.
当我意识到同一个“提问”页面上的“如何提问/格式化”侧边栏框完全符合我的要求时，我正在写一篇关于我想要做什么的长篇描述。
Basically, it scrolls up and down in unison with the rest of the screen, staying top-aligned with the main section, unless the main section starts to scroll off the top of the visible window. At that point, the sidebar box stops scrolling, and starts to act as if its positioned absolutely, against the top of the visible window.
基本上，它与屏幕的其余部分一起上下滚动，与主要部分保持顶部对齐，除非主要部分开始滚动到可见窗口的顶部。在这一点上，侧边栏框停止滚动，并开始充当它的绝对定位，对着可见窗口的顶部。
I've tried digging into source code and scripts on this "Ask" screen, but there's so much going on that it's pretty much impossible (for me, at least). I'm assuming that jQuery actually makes this kind of thing pretty straightforward, but I'm new to it, so I'm having a hard time figuring it out for myself. (And if this turns out to be a common question, my apologies -- I've been searching for about an hour, but there are somany closely-worded jQuery questions that I haven't been able to dig up an answer.)
我已经尝试在这个“询问”屏幕上深入研究源代码和脚本，但是发生的事情太多了，这几乎是不可能的（至少对我来说）。我假设 jQuery 实际上让这种事情变得非常简单，但我是新手，所以我很难自己弄清楚。（如果这原来是一个常见的问题，我的道歉-我一直在寻找了约一个小时，但有如此。许多密切措辞jQuery的问题，我一直没能挖了一个答案）
Thanks in advance for any help.
在此先感谢您的帮助。
采纳答案by Dutchie432
Here is a little snippet I just whipped up to keep an object on screen while scrolling.
这是我刚刚制作的一个小片段，用于在滚动时将对象保留在屏幕上。
LIVE DEMO
现场演示
http://jsfiddle.net/Jaybles/C5yWu/
http://jsfiddle.net/Jaybles/C5yWu/
HTML
HTML
<div id='object'>Top: 0px</div>
CSS
CSS
#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}
jQuery
jQuery
$(window).scroll(function(){
var objectTop = $('#object').position().top;
var objectHeight = $('#object').outerHeight();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
if (windowScrollTop > objectTop)
$('#object').css('top', windowScrollTop );
else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight))
$('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);
$('#object').html('Top: ' + $('#object').position().top + 'px');
});
UPDATED EXAMPLE (With Timer + Animation)
更新示例（带定时器 + 动画）
回答by michelgotta
This is an example for a shoppingcart Apple has on the Applestore Page.
这是 Apple 在 Applestore 页面上的购物车示例。
The logic:
逻辑：
- check where the sticky element is
- check on the scroll event where the top window is
- add or remove CSS class to the sticky element
- 检查粘性元素在哪里
- 检查顶部窗口所在的滚动事件
- 向粘性元素添加或删除 CSS 类
The jQuery:
jQuery：
$(document).ready(function() {
// check where the shoppingcart-div is
var offset = $('#shopping-cart').offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // check the visible top of the browser
if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');
else $('#shopping-cart').removeClass('fixed');
});
});
The CSS:
CSS：
.fixed {
position: fixed;
top: 20px;
margin-left: 720px;
background-color: #0f0 ! important; }
回答by Aylian Craspa
if you need to keep it on bottom use as this jQuery
如果您需要将其保持在底部，请使用此 jQuery
$(document).scroll(function() {
var objectTop = $('#shopping-cart').position().top;
var objectHeight = $('#shopping-cart').outerHeight();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
if((objectTop+objectHeight) <= $('html').outerHeight())
$('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight);
else
$('#'+cont).css('top', $('html').outerHeight()- objectHeight);
});
Css
css
#shopping-cart{
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom: 0px;
}
if you need to keep it on top use as this jquery
如果您需要将其保持在顶部，请用作此 jquery
$(document).scroll(function() {
var objectHeight = $('#shopping-cart').outerHeight();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
$('#shopping-cart').css('top', windowScrollTop );
});
Css
css
#shopping-cart{
width: 100%;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
}
it will do the magic and dont forget to keep your styles with the positions, and one thing its not work with internet explorer 8.0.7
它会发挥作用，不要忘记保持您的风格与位置，还有一件事它不适用于 Internet Explorer 8.0.7
回答by Aylian Craspa
And if you only need to hold the div in a some place of the browser you don't need the javascript you can do that with CSS.
如果您只需要将 div 保存在浏览器的某个位置，您就不需要 javascript，您可以使用 CSS 来做到这一点。
#chatt-box {
right: 5px;
height: auto;
width: 300px;
position: fixed;
bottom: 0px;
}
