Question

我有一个类.fullscreen的div，这个类与一个小的JavaScript函数相关联，该函数将使该div显示为全屏。 ＆＃34;即div.fullscreen的宽度和高度将为100％＆＃34;。

//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标题＆＃34;导航栏＆＃34;，标题最初位于div.fullscreen下 - 然而，我试图将其定位为Fixed当#header的顶部到达浏览器窗口的顶部时。

所以这就是我正在玩的东西，它切换固定样式，但它不会在正确的地方切换它......

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

所以，我试图整合（var newHeight = $("html").height() + "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

当您滚过fixed-nav div时，您只想添加.fullscreen类。例如：

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

我在这里使用$(window).height()，因为我们知道.fullscreen的高度等于窗口的高度，但我们也可以使用$('.fullscreen').height()。请注意，我们无法使用$('.nav').offset().top，因为在导航修复后此偏移量不会提供正确的数字。

请参阅此JSFiddle。

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

标题只有在其顶部到达窗口顶部时才会固定

1 个答案: