Question

直到现在我已经设法做到这一点 -

在页面顶部的某个像素之后，div会改变它的背景颜色。

但我只想在滚动时更改该div的背景颜色。一旦div被滚动过去，我想将它的背景颜色改回原来的颜色。

这是我尝试过的代码

＆＃13;

$(window).scroll(function(){
    if($(window).scrollTop()>50){
   
    $('.q_ans_sec').attr('id', 'scrolled_fixedDiv');
        } else {
           $('.q_ans_sec').removeAttr('id');
        }
        
        });

＆＃13;

.container-fluid {
    background-color:blue;
    height:500px;
    }
    
#scrolled_fixedDiv.container-fluid {
    background-color: red;
}
.nxtdiv {
height:500px;
}

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container-fluid q_ans_sec">
</div>
<div class="nxtdiv">
</div>

＆＃13;

正如您在上面的示例中看到的那样，当您向上滚动时它仍然是红色，并且仅当滚动小于50px时才将其颜色更改为蓝色。

当我再次向上滚动时，我希望它是蓝色的。知道如何实现它。

谢谢！

Answer 1

试试这个：

if($(window).scrollTop() > $(document).height()*0.5)

尝试使用$(document).height()检索页面高度。如果您想要视口高度，则需要使用$(window).height()。

如何在滚动时更改div背景颜色？

1 个答案: