jquery - 标题滚出页面时的静态导航。使这项工作与可扩展的内容一起工作。有小费吗？

Question

我在这里的第一篇文章，我在这里偶然发现了一些问题。这在窗口为全尺寸(1024 像素)时有效，但当内容缩小时，图像(标题)的高度自然会小于 180 像素。

所以，我的问题是:有没有办法让jQuery随时知道header-image的准确高度？

CSS

.wrapper
{
    position: relative;
    background-color: white;
    height: 1024px;
    width: 80%;
    max-width: 1024px;
    margin-right: auto;
    margin-left: auto;
}

.headerLogo
{
    margin-left: 0 auto;
    margin-right: 0 auto;
}

.headerLogo img
{
    max-width: 1024px;
    width: 100%;
    display: block;
}
.meny
{
    border-bottom: 1px solid #d3d3d3;
    background-color: white;
    width: 100%;
    max-width: 1024px;
    height: 50px;

    display: block;
    float: left;

    /*opacity: 0.8;*/

    /*border: 1px solid black;*/
}
.fastMeny
{
    position: fixed;
    top: 0;
    z-index: 1;
    max-width: 1024px;
    width: 80%;
}

jQuery

$(window).scroll(function()
{
    if ($(window).scrollTop() > 180)
    {
        $(".meny").addClass("fastMeny");
    }
    else if ($(window).scrollTop() < 180)
    {
        $(".meny").removeClass("fastMeny");
    }
});

Answer 1

更改您的代码以编程方式检索图像的高度:

var timer;
$(window).scroll(function()
    clearTimeout(timer);
    timer = setTimeout(function() {
        var $window = $(window), 
            $img = $('.headerLogo'),
            $meny = $('.meny');

        if ($window.scrollTop() > $img.height()) {
            $meny.addClass("fastMeny");
        }
        else if ($window.scrollTop() < $img.height()) {
            $meny.removeClass("fastMeny");
        }
    }, 50);
});

另请注意，附加到 scroll 事件的处理程序可能会降低性能。我添加了一个超时，以便您的代码在滚动停止后仅运行 50 毫秒。这应该可以防止滚动时出现任何性能问题。