Jquery 改变类属性

Question

我正在尝试制作一个工具栏，当页面向下滚动并且工具栏上方的标题不在屏幕上时，它会将自己固定在我的网页顶部。然而，无论滚动如何，工具栏似乎都保持设置为绝对位置。这段代码中是否存在我没​​有看到的问题？

$(window).scroll(function() 
{
    if (isVisible($('.header-box'))) 
    {
        $('.toolbar').css({'position': 'absolute','top': '25%'});
    } 
    else 
    {
        $('.toolbar').css({'position': 'fixed','top': '0%'});
    }
});

function isVisible(elm) 
{
    var windowHeight = $(window).height(),
    pageTop = $(window).scrollTop(),
    Y = $(elm).offset().top,
    elementHeight = $(elm).height();

    return ((Y < (windowHeight + pageTop)) && (Y > (pageTop - elementHeight)));
}

Answer 1

看看这个:

$( window ) . scroll ( function () 
{
    var header = $( ".header-box" );
    var toolbar = $( ".toolbar" );
    if ( $( window ) . scrollTop () > header . offset ().top + header . height () ) { toolbar . css ( { "position": "fixed" } ); }
    else { toolbar . css ( { "position": "relative" } ); }
});

完整的例子在这个 fiddle 里:JSfiddle

希望对您有所帮助。