在粘性标题中计算屏幕大小

Question

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

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

我现有的代码是：

$(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");
    }
});

如果它比窗口小，你也可以获得第一部分的高度

Answer 2

我不知道是否有更好的解决方案，但这是我的解决方案：

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

if (scroll >= $(window).height()*0.2) { //0.2 for 20% of the viewport height, you can change this value if you need to
    $(".main").addClass("sticky");
} else {
    $(".main").removeClass("sticky");
}
});

我只是使用$(window).height()来获取视口高度。