使用 jQuery 始终处于领先地位答案

【问题标题】：Always on top with jQuery使用 jQuery 始终处于领先地位
【发布时间】：2013-09-22 09:23:19
【问题描述】：

我试图让一个按钮始终保持在页面顶部，即使有滚动也是如此。有人可以帮忙吗？

（这是一个简化的情况。我不能使用固定位置）

查询：

$(function(){
    var boto = $('.boto').offset().top;
    $(window).scroll(function() {
        if (boto < 0) {
            $( '.boto' ).offset({ top: 50 });
        } 
    });
})

【问题讨论】：

在你的小提琴中，你使用$('#boto')，但只有<div class="boto"></div>。如果您想要发生任何事情，其中之一需要更改。（尽管也有其他问题，正如我在下面的回答中所指出的那样）
我更新了小提琴。谢谢

标签： jquery offset

【解决方案1】：

不需要jquery使用cssposition:fixed

演示Fiddle

或者你可以这样做：

$(function(){
    $(window).scroll( function() {
        var boto =$(window).scrollTop() - $('.boto').offset().top;
        if (boto)
            $('.boto').addClass('top');
        else
            $('.boto').removeClass('top');
    } );
})

css:

.boto.top {
    position: fixed;
    top: 0;
}

演示Fiddle

【讨论】：

当然，但我只是简化了这里的案例来说明问题。但我不能那样做。（我上面还有其他 div ......一切都很复杂）

【解决方案2】：

就您的（原始、未经编辑的）代码为何不起作用而言，

boto 不指向 $('#boto').offset().top，它只是存储它的值。
== 不是一个赋值，它是一个逻辑比较（所以boto == 0 没有给boto 一个值0，它只是将它与0 比较并返回true/false） .
这不是您使用.offset() 设置位置的方式： http://api.jquery.com/offset/
.offset() 相对于文档起作用，而不是相对于视口

试试：

$(function(){
    var boto = $('#boto');
    $(document).scroll(function() {
        boto.offset({top: document.body.scrollTop});
    });
});

http://jsfiddle.net/BYossarian/TCX6h/7/

【讨论】：

【解决方案3】：

是的@RAM 是对的。检查一下

#background {
position:fixed;
top:0;
    ...

fiddle

【讨论】：

【解决方案4】：

给你的按钮固定位置而不是绝对位置

    .boto{
    position:fixed;
    top: 0px; left:50%;
    margin-left:-115px;
    width:30px; height:20px;
    cursor:pointer;

    background:yellow;
    padding:30px 100px;
}

Fiddle

【讨论】：