有大量关于将标题粘贴在滚动条上以固定高度标题的教程/示例。但是,我正在开发一个单页网站,初始部分是全屏图像。然后,用户向下滚动以显示标题和其他内容区域。
所以我的问题是,如何更改代码以考虑视口(viewport)/屏幕大小 - 而不是使用固定的标题大小?
我现有的代码是:
$(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");
}
});
如果第一部分小于窗口,您还可以获得它的高度
关于javascript - 在粘性标题中计算屏幕尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38719900/