scrolltop 上的 javascript 动画 div 高度 + 背景颜色

Question

我正在构建自己的摄影网站，其标题会在用户向下滚动页面时发生变化。 HTML 菜单/标题如下所示:

<div id="menu" class="fluid">
header/menu content
</div>

我使用 CSS 创建了一个透明的黑色背景，并为菜单指定了一个高度:

#menu {
height: 100px;
background-color: rgba(0,0,0,0.1);
}

现在，使用 JavaScript，当用户向下滚动超过 5 像素时，我将此 header 折叠为 75 像素。当您滚动回到顶部时，它会回到 100 像素。 JavaScript 代码如下所示:

<script>
// Minimize menu on scroll
  $(window).on('scroll', function () {
  var scrollTop = $(window).scrollTop();
  if (scrollTop > 5) {
      $('#menu').stop().animate({height: "75px"},150);
  }
  else {
      $('#menu').stop().animate({height: "100px"},150);
  }
  });
</script>

我正在寻找一种简单的方法来更改背景透明度以及菜单的高度，并希望有人知道为此使用什么代码。我没有使用 JavaScript 的经验，只使用过 HTML 和 CSS 代码。

在此先感谢，如果之前有人问过这个问题，我很抱歉(我无法使用我的关键字找到它)。

~埃尔米戈

Answer 1

您可以使用 css transition 制作动画:通过上面的例子，我刚刚在不透明度上添加了过渡属性我设法在滚动时更改它。

不是我设置了 rgb 颜色值而不是 rgba ，还将不透明度设置为 0.1;

// Minimize menu on scroll
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 5) {
    $('#menu').stop().animate({height: "50px"},150);
    //$('#menu').css("opacity","0.8");
    $('div').css('background-color', 'rgba(0,0,0,0.8)')
}
else {
    $('#menu').stop().animate({height: "100px"},150);
    //$('#menu').css("opacity","0.1");
    $('div').css('background-color', 'rgba(0,0,0,0.1)')
}
});

#menu {
  height: 100px;
  background-color: rgba(0,0,0,0.1);
  transition:background-color 0.5s ease;
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="fluid">
<p>gggg<p>
</div>
text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text<br>text<br>text