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

Calculate screen size in a sticky header

本文关键字：屏幕 标题 计算      更新时间：2023-09-26

有很多教程/示例可以让固定高度的页眉在滚动中保持不变。然而，我正在一个一页的网站上工作，最初的部分是全屏图像。然后，用户向下滚动以显示标题和其他内容区域。

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

我现有的代码是：

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

您可以使用窗口的高度而不是固定值（因为您谈论的是全屏图像，我猜它的高度等于窗口高度）：

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

如果第一部分的高度小于窗口

，您也可以获得它的高度

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

$(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()来获取视口高度。

相关文章：