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" } ); }
});

完整的例子就是这个小提琴：JSfiddle

我希望这会对你有所帮助。

Jquery更改类属性

1 个答案: