Question

当我向下滚动时，如何使用jquery将透明菜单设置为黑色动画？我正在尝试使用滚动功能，但我不知道如何为渐变设置动画。

HTML：

<body>
    <div id="menu">
    </div>
    <div id="text">
    </div>
</body>

CSS：

#menu {
    width: 1200px;
    height: 90px;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
}

#text {
    width: 1000px;
    height: 1000px;
    background-color: #31fa87;
}

Jquery的：

$(window).scroll(function(
){});

https://jsfiddle.net/5gudwLs6/3/

Answer 1

希望它有所帮助!! ;）Jquery解决方案，使用scrolltop检查与body元素大小的相对位置！

$(window).scroll(function() {

  $("#menu").css("opacity", $("body").scrollTop() / $("body").height());

});

#menu {
  opacity: 0.0;
  width: 1200px;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
}
#text {
  width: 1000px;
  height: 1000px;
  background-color: #31fa87;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="menu">
  </div>
  <div id="text">
  </div>
</body>

滚动时动画渐变

1 个答案: