用于更改滚动元素位置的 jQuery 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11003234/
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 code to change position of element on scroll
提问by Ahmed Fouad
I have a bar which includes sharing and social icons. The bar is positioned below post title now like this:
我有一个包含共享和社交图标的栏。该栏现在位于帖子标题下方，如下所示：
<div class="post" id="post-<?php the_ID(); ?>">
<div class="title">
<h1><?php the_title(); ?></h1>
</div>
<div class="sharelinks">
<ul>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">Tweet</a></li>
<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div></li>
<li><g:plusone size="medium" href="<?php the_permalink(); ?>/"></g:plusone></li>
<li><a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo urlencode(sofa_image_src('full')); ?>&description=<?php echo urlencode(get_the_title($post->ID)); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></li>
<li><su:badge layout="1"></su:badge></li>
</ul>
</div>
</div>
That is my html. and my css for the "sharelinks" is:
那是我的html。我的“共享链接”的 css 是：
.sharelinks {
padding: 10px 20px;
background: #f1f1f1;
box-shadow: 0 1px #fff inset, 0 -1px #fff inset;
border-bottom: 1px solid #ddd;
position: relative;
}
What I want to achieve?- I want to change the position of the sharelinks div when user scrolls beyond its scope and place it always on TOP of page (fixed position) then make it return to its default position when user scrolls back up to its place. The idea is how to make the bar appears in its position as long as the user does not scroll "beyond" it if he scroll , it appears fixed on top of page.
我想达到什么目标？- 我想在用户滚动超出其范围时更改 sharelinks div 的位置并将其始终放置在页面顶部（固定位置），然后在用户向上滚动到其位置时使其返回到其默认位置。这个想法是如何让栏出现在它的位置，只要用户不滚动“超出”它，如果他滚动，它就会固定在页面顶部。
I have a similar code which works perfectly for HEADER but the same code does not work for this element,i think because my header is at the very top of the page.
我有一个类似的代码，它非常适用于 HEADER，但相同的代码不适用于这个元素，我想是因为我的标题位于页面的最顶部。
I really need any help or ideas how to make that effect I am after.
我真的需要任何帮助或想法来实现我所追求的效果。
// fixed navigation
var yOffset = $("#header").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > yOffset) {
$("#header").css({
'top': 0,
'position': 'fixed'
});
} else {
$("#header").css({
'top': yOffset + 'px',
'position': 'absolute'
});
}
});
回答by Ahmed Fouad
Here is the fixed solution. :)
这是固定的解决方案。:)
It starts with getting scroll position then change the CSS of element to fixed when scrolling passes specific value (the distance between top to element start) else revert default css for element.
它从获取滚动位置开始，然后在滚动传递特定值（顶部到元素开始之间的距离）时将元素的 CSS 更改为固定，否则恢复元素的默认 css。
var sOffset = $(".sharelinks").offset().top;
var shareheight = $(".sharelinks").height() + 43;
$(window).scroll(function() {
var scrollYpos = $(document).scrollTop();
if (scrollYpos > sOffset - shareheight) {
$(".sharelinks").css({
'top': '61px',
'position': 'fixed'
});
} else {
$(".sharelinks").css({
'top': 'auto',
'position': 'relative'
});
}
});
回答by Konga Raju
use position:stickyto make it.
用position:sticky做出来。
Here is the article explained.
这是文章解释。
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
和做这个演示的旧方法
with sticky position demo
带有粘性位置演示
