如何在没有位置的页面上滚动 div：已修复？

Question

我找到了这个脚本：

$(function(){
var btn = $('.social');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed',left:'82%'});
}else if(btn.css('position') === 'fixed'){
btn.css({position:'',left:''});
}
});
});

效果很好。我将原始字段更改为“.social”，以便它可以与我的代码一起使用。

不过，我并不是在寻找 "left: 82%" 的废话修复程序。我想避开 position: fixed;然后简单地滚动 div 它所在的位置。

我的树是#container .contain .single-content .social

position: fixed 是我的主要问题，但如果您知道，那么一旦 .social 到达 .single-content 的最底部就停止它，这将是一个重要的优势！

希望我提供了足够的信息。

HTML:

<div id='container'>
<div class='contain'>
<div class='single-content'>
<div class='first'>
<div class='social'>

content here.. no p tags.. just facebook, twitter buttons etc.

</div>
</div>
</div>
</div>
</div><!-- container -->

编辑：有问题的网站：thelackof.com

你可以看到社交图标因为我的 left:82% 而偏移了一点如果我删除 left:，那么新的 position: fixed 会将我的 div 跳出包含 div 并一直跳到下一个包含 div.[=14 的左侧=]

我希望它留在原处并在到达后向下滚动。

Answer 1

编辑编号。 2: 首先:

所以它会得到一个不会干扰主要内容的值:

#container .contain .single-content .first .social {
    float: left;
    position: absolute;
    width: 15%;
    right: 0;
}

然后这个：

$(function(){
var btn = $('.social');

var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed'});
}else if(btn.css('position') === 'fixed'){
btn.css({position:''});}
if (btnPosTop >= $('.single-content').offset().top-92){
    btn.css({position:''});
}
});
});

我可能答错了你的问题，但我想这正是你所要求的。我去掉了左边的属性.

希望对您有所帮助:)

编辑： 我添加了：

if (btnPosTop >= $('.single-content').offset().top){
    btn.css({position:''});
}

所以它会滚动直到 btnPosTop 大于 .single-content 的 offset().top

如果有效请告诉我

如何在没有位置的页面上滚动 div：已修复？

How to scroll div with page without position: fixed?

html

javascript

css

jquery

scroll