总是在jQuery上面

时间:2013-09-22 09:23:19

标签: jquery offset

即使有滚动条,我也会尝试一个始终位于页面顶部的按钮。任何人都可以帮忙吗?

(这是一个简化的案例。我不能使用固定的位置)

您可以在此处查看:http://jsfiddle.net/TCX6h/6/

JQUERY:

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

4 个答案:

答案 0 :(得分:2)

不需要jquery使用css position: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

答案 1 :(得分:1)

就您(原始的,未经编辑的)代码无效的原因而言,

  1. boto不会指向$('#boto').offset().top,它只会存储它的值。
  2. ==不是作业,它是一种逻辑比较(因此boto == 0没有给boto 0一个值,只是将它与{{{}}进行比较1}}并返回0 / true)。
  3. 这不是您使用false设置位置的方式: http://api.jquery.com/offset/
  4. .offset()相对于文档工作,而不是相对于视口
  5. 尝试:

    .offset()

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

答案 2 :(得分:0)

是的@RAM是对的。检查这个

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

fiddle

答案 3 :(得分:0)

按钮固定位置而不是绝对位置

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

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

Fiddle

相关问题