javascript - 在粘性标题中计算屏幕尺寸

Question

有大量关于将标题粘贴在滚动条上以固定高度标题的教程/示例。但是，我正在开发一个单页网站，初始部分是全屏图像。然后，用户向下滚动以显示标题和其他内容区域。

所以我的问题是，如何更改代码以考虑视口(viewport)/屏幕大小 - 而不是使用固定的标题大小？

我现有的代码是:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 65) {
        $(".main").addClass("sticky");
    } else {
        $(".main").removeClass("sticky");
    }
});

Answer 1

您可以使用窗口的高度而不是固定值(因为您正在谈论全屏图像，我猜测它的高度等于窗口高度):

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= $(window).height()) {
        $(".main").addClass("sticky");
    } else {
        $(".main").removeClass("sticky");
    }
});

如果第一部分小于窗口，您还可以获得它的高度