Question

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

所以，我的问题如下：有没有办法让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事件的处理程序可能会导致性能下降。我添加了一个超时，以便您的代码仅在滚动停止后运行50ms。这可以防止滚动时出现任何性能问题。

标题滚出页面时的静态导航。使用可扩展内容实现此功能。有小费吗？

1 个答案: