如何在没有位置的页面上滚动 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”，以便它可以与我的代码一起使用。

不过，我并不是在寻找“左：82%”的废话修复。 我想避免这个位置：固定；并简单地滚动它所在的 div。

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

位置：固定是我的主要问题，但如果你知道，那么一旦 .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

你可以看到社交图标是如何因为我的左手而偏移的：82% 如果我删除 left:，那么新的 position: fixed 会将我的 div 跳出包含 div 并一直跳到下一个包含 div 的左侧。

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

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:''});
}
});
});

我可能把你的问题弄错了，但我认为这就是你所要求的。我删除了 left 属性。

希望对你有帮助:)

编辑：我已添加：

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

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

如果有效，请告诉我