Javascript 滚动时将一个div粘贴到一个div

请检查小提琴：

当滚动时，我想通过jQuery将

.float

设置为粘性

。right

HTML代码

<div class="main">
    <div class="float">
        float
    </div>
    <div class="right">
        Stick float to me
    </div>
</div>

.main{
    margin-bottom:30px;

}
.float{
    background:  #333333;
    color: #FFFFFF;
    float: left;
    height: 40px;
    margin-right: 20px;
    width: 40px;
}
.right{
    background: none repeat scroll 0 0 #AAAAAA;
    height: 245px;
    overflow: hidden;    
}

这应该做到：

$(window).scroll(function(){
var st = $(this).scrollTop();

$('.main').each(function(){
    var $this = $(this), 
        offset = $this.offset(),
        h = $this.height(),
        $float = $this.find('.float'),
        floatH = $float.height();

    if(st >= offset.top && st < offset.top + h - floatH){
        $float.css({'position':'fixed'});
    }else{
        $float.css({'position':'absolute'});
    }
})
});

我已经更新了答案，以解决

”上的问题。对“

——保持相同的宽度和位置

与@UDB solution类似，但在该方法（更改

'margin-top'

）中，我注意到

'.float'

有时会抖动，尤其是在长滚动和快速滚动时，这种情况会发生：

在我的新解决方案中，我们只更改了

位置

属性，因此到目前为止没有问题

看这个

---

也要感谢@Zeaklous和@UDB ideas。

修改了

标记S

的答案，使

.float

保持在左侧，就像在注释中提供链接的页面一样

$(window).scroll(function () {
var st = $(this).scrollTop();

$('.main').each(function () {
    var $this = $(this),
        offset = $this.offset(),
        h = $this.height();

    if (st >= offset.top && st < offset.top + h - 40) {
        $this.find('.float').css({
            'margin-top': st - offset.top + 'px'
        });
    } else if (st >= offset.top + h + 30/*.main margin-bottom*/) {
        $this.find('.float').css({
            'margin-top': 'auto'
        });
    }


})
});

$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
$（'.main'）。每个（函数（）{
变量$this=$（this），
偏移量=$this.offset（），
h=$this.height（）；
如果（st>=offset.top&&st=offset.top+h+30/*。主页边距底部*/）{
$this.find（'.float'）.css({
“页边距顶部”：“自动”
});
}
})
});

---

这就是你所说的“粘性”吗？这就是你想要的吗？@AndreasBjørn不，它是浮动的整个div，我只想在滚动时使

.float

。在这种情况下，我认为@UDB是正确的。不，它也不起作用。。。请看这里当滚动时投票是如何浮动的，我想要同样的东西：检查你的下限，减去浮动的高度谢谢，这正是我想要的。哇，这个解决方案也很神奇，我喜欢它，因为它不会像@Mark s那样突然消失

$(window).scroll(function () {
var st = $(this).scrollTop();

$('.main').each(function () {
    var $this = $(this),
        offset = $this.offset(),
        h = $this.height();

    if (st >= offset.top && st < offset.top + h - 40) {
        $this.find('.float').css({
            'margin-top': st - offset.top + 'px'
        });
    } else if (st >= offset.top + h + 30/*.main margin-bottom*/) {
        $this.find('.float').css({
            'margin-top': 'auto'
        });
    }


})
});