滚动超过50％的屏幕时，是否可以使用jquery更改部分颜色？

Question

我有一个包含12个部分的页面。我想在每个部分滚动到50％之前有一个阴影。滚动后，阴影将消失。我如何使用jquery来实现这一目标？

Answer 1

您可以使用HTML元素的本机方法getBoundingClientRect此方法返回元素的矩形尺寸。因此，您可以获得窗口对象的高度，将其除以2并与矩形顶部值进行比较。如果top值小于或等于窗口高度的一半，则需要从此元素中删除阴影。您需要在滚动事件上执行上述所有操作 简单示例：

var shadowEdgePoint = $(window).height() / 2;
$(window).on('scroll', function(e){
    $('.sections-class').each(function(){
        if(this.getBoundingClientRect().top <= shadowEdgePoint){
             $(this).removeClass('shadowClass') ;
        }
        else{
             $(this).addClass('shadowClass') ;
        }
    })
})