用于更改滚动条上元素位置的jQuery代码
我有一个酒吧,里面有分享和社交图标。该栏现在位于帖子标题下方,如下所示:用于更改滚动条上元素位置的jQuery代码,jquery,css,position,Jquery,Css,Position,我有一个酒吧,里面有分享和社交图标。该栏现在位于帖子标题下方,如下所示: <div class="post" id="post-<?php the_ID(); ?>"> <div class="title"> <h1><?php the_title(); ?></h1> </div> <div cla
<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>
我想要实现什么?
-我想在用户滚动超出其范围时更改sharelinks div的位置,并将其始终放在页面顶部(固定位置),然后在用户滚动回到其位置时使其返回默认位置。这样做的目的是,只要用户不在滚动条的上方滚动,该条就会显示在其位置上。如果用户滚动条,该条就会固定在页面的顶部
我有一个类似的代码,它可以很好地用于HEADER,但是相同的代码不适用于这个元素,我认为这是因为我的HEADER位于页面的最顶端
我真的需要任何帮助或想法如何使我所追求的效果
// 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'
});
}
});
这是固定的解决方案。:) 它从获取滚动位置开始,然后在滚动通过特定值(从顶部到元素开始的距离)时将元素的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'
});
}
});
使用
position:sticky
进行设置
下面是文章的解释
还有老办法
使用这看起来正是您想要的:使用jQuery插件完成,实现起来非常简单。这可能会有帮助:这个答案已经过时-CSS位置:sticky目前基本上不受支持-请参阅
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'
});
}
});