在这里需要一些帮助。我需要确定某个元素何时位于视口的底部,然后向其中添加固定的类。因此,在向下滚动时,当元素位于底部0时添加类,而当我向上滚动时,则删除类。
$(window).scroll(function() {
var $el = $('.content-btn-row');
if ($($el).position().top + $($el).height()) {
console.log("bottom!");
$(".content-btn-row").addClass("fixed");
} else {
$(".scontent-btn-row").removeClass("fixed");
}
});
最佳答案
IMO,我们应该考虑窗口内容区域的内部高度(该高度可以与窗口高度不同),并检查文档是否已滚动。window.innerHeight
-返回窗口内容区域的内部高度window.pageYOffset
-返回当前文档已从窗口左上角(垂直)滚动的像素
如果元素在开始时位于视口下方,则此代码应该可以:
var elem = window.innerHeight + $($el).height(); //position of the element
var winScroll = window.innerHeight + window.pageYOffset; //viewport height + scroll
if (elem) >= (winScroll) {
console.log("bottom!");
$(".content-btn-row").addClass("fixed");
} else {
$(".scontent-btn-row").removeClass("fixed");
}
}
在添加或删除该类之前,最好先检查是否存在
hasClass
一个“固定”类。关于javascript - 确定元素在视口(viewport)的底部并向其添加类?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44370784/