Here is my fiddle link: https://jsfiddle.net/jzhang172/owkqmtcc/5/
I am attempting to change the background color of the "content" div when scrolling anywhere within it. The goal is for the background color to change when scrolling and revert back to its original color when at the top of the div. I noticed that adding height instead of background color works fine, but I can't figure out why the background color isn't changing as expected:
$(function(){
var content = $(".content");
$(".box").scroll(function(event){
var positionofscroll = $(".content").scrollTop();
if(positionofscroll == 0){
content.stop().animate({
backgroundColor:"rgba(105, 63, 63, 0.69)"
},500);
}else {
content.stop().animate({
backgroundColor:"red"
},500);
}
}); //scroll
});.box{
width:100%;
height:500px;
background:gray;
overflow:auto;
}
.content{
color:white;
display:flex;
justify-content:center;
align-items:center;
height:1000px;
background:red;
font-size:30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!--Shadow Box when user scrolls -->
<div class="box">
<div class="content">
I'm content
</div>
</div>