Question

使用此代码，我可以在从浏览器窗口顶部获取一定数量的像素时为div添加一个类。是否可以使用％来代替？所以我可以把它从顶部设置为50％？这意味着对所有屏幕尺寸均匀影响......

<script>
$(window).scroll(function() {
    $('.names').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+350) {
            $('.names').addClass("slideRight");
        }
    });
});
</script>

Answer 1

使用jQuery height()之类的

$(document).height()

所以，将代码更改为

<script>
$(window).scroll(function() {
    $('.names').each(function(){
    var imagePos = $(this).offset().top;

    var halfWay = $(document).height()/2;
        if (imagePos < halfWay) {
            $('.names').addClass("slideRight");
        }
    });
});
</script>

Answer 2

您需要使用百分比还是可以使用窗户高度的一半？

$(window).height()/2;

可能看起来像这样：

if (imagePos < $(window).height()/2) {
    $('.names').addClass("slideRight");
}

Answer 3

您需要先计算视口高度：

var vpHeight = window.innerHeight;

接下来，你需要监控有问题的DIV相对于视口的垂直位置何时到达中途点。

var vpPosition = element.getBoundingClientRect();
if (vpPosition.top <= vpHeight / 2) {
  //do something
}

将上述内容放在setInterval中，以便定期重复，比如说每100毫秒。

有关getBoundingClientRect的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

当div在浏览器窗口中正好滚动一半时添加类，％not px

3 个答案: