Javascript 标题仅在其顶部到达窗口顶部时固定

我有一个类为

.fullscreen

的div，这个类与一个小JavaScript函数相关联，该函数将使该div显示为全屏。“即

div.fullscreen

的宽度和高度将为100%”

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

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

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

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

---

该问题的实时示例：

当您滚动通过

.fullscreen

div时，您只想添加

固定导航类。例如：

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

我在这里使用了
$（window）.height（）
，因为我们知道
.fullscreen
的高度等于窗口的高度，但是我们也可以使用
$（'.fullscreen'）.height（）
。请注意，我们不能使用
$（'.nav'）.offset（）.top
，因为在nav固定后，该偏移量将不会提供正确的数字

看这个

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

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

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