报头仅在其顶部到达窗口顶部时固定

Question

我有一个div类. fullview，这个类与一个小的JavaScript函数相关联，它将使div显示为全屏。"也就是说，div.fullscreen的宽度和高度将是100%”。

//Fullscreen
$(window).on("ready resize", function () {
    if ($(window).width() > 1024) {
        var newHeight = $("html").height() - $("#header").height() + "px";
        $(".fullscreen").css("height", newHeight);
    } else {
        $(".fullscreen").css("height", "auto");
    }
});

因此，高度和宽度不是固定的，它是根据窗口的缩小动态计算的。

在该div下，还有另一个具有ID标头“导航栏”的标头，标头最初相对定位在div.fullscreen-然而，我试图将其定位为固定，当#标头的顶部到达顶部时浏览器窗口。

所以这里是我正在玩的，它切换固定的风格，但它没有切换到正确的位置。。。

var offset = $('#header').offset();
$(window).scroll(function () {
    $('#header').addClass('fixed-nav');
    if ($(document).scrollTop() < 150) {
        $('#header').removeClass('fixed-nav');
    }
});

因此，我尝试集成（var newHeight=$（“html”）。高度（）“px” ）下面是它，但没有希望：

var newHeight = $("html").height() + "px";
var offset = $('#header').offset();
    $(window).scroll(function () {
        $('#header').addClass('fixed-nav');
        if ($(document).scrollTop() < newHeight) {
            $('#header').removeClass('fixed-nav');
        }
    });

问题的现场例子：http://loai.directory/martin/




Answer 1

当您滚动通过. fullviewdiv时，您只希望添加固定导航类。例如：

$(window).on('scroll', function () {
    if ($(window).scrollTop() >= $(window).height())
        $('.nav').addClass('fixed');
    else
        $('.nav').removeClass('fixed');
});

我使用了$（窗口）。高度（）在这里，因为我们知道。全屏的高度等于窗口的高度，但我们也可以使用$（“.fullscreen”）。高度（）。请注意，我们不能使用$（'.nav'）。偏移量（）。顶部，因为在导航变为固定后，该偏移量不会提供正确的数字。

看看这个。

您还需要添加各种resize侦听器，以便在调整窗口大小时处理更改。