Question

我的小提琴：https://jsfiddle.net/jzhang172/owkqmtcc/5/

我想要完成的任务：当我在div中的任何位置滚动时，div“content”的背景颜色将会改变。当滚动停留在div的顶部时，它将恢复为原始颜色。当我添加高度而不是背景颜色时，它工作正常，但不确定为什么背景颜色不起作用：

$(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>

Answer 1

试试这个：

var content = $(".content");

$(".box").scroll(function(event)
{
  var positionofscroll = $(this).scrollTop();
  if (positionofscroll > 0)
  {
    $(".content").css('background-color','rgba(105, 63, 63, 0.69)');
  }
  else 
  {
    $(".content").attr('style','');
  }
});

小提琴：https://jsfiddle.net/4fc6pook/

如果要为背景颜色的变化设置动画，请将一些css添加到.content：

transition: all 0.3s ease-out;

或类似的东西。希望这有帮助！

Answer 2

尝试包含jQuery UI，因为.animate()没有修改颜色或颜色插件没有动画颜色;见.animate()

动画属性和值

所有动画属性都应设置为单个数字的动画   价值，除非如下所述;大多数非数字属性   无法使用基本的jQuery功能进行动画处理（例如，   width，height或left可以设置动画但background-color   不能，除非使用jQuery.Color插件。）

还将positionofscroll的选择器调整为$(this).scrollTop();将比较运算符更改为>

处的if

$(function() {
  var content = $(".content");

  $(".box").scroll(function(event) {
    var positionofscroll = $(this).scrollTop();
    console.log(positionofscroll);
    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>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<!--Shadow Box when user scrolls -->

<div class="box">
  <div class="content">
    I'm content
  </div>

</div>

滚动backgroundColor上的jQuery动画不会改变

2 个答案: