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

debugcn 发表于 Dev

乔娜·戈德帕

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

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

我使用 CSS 创建了一个透明的黑色背景，并为菜单设置了高度：

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

现在，使用 JavaScript，当用户向下滚动超过 5 个像素时，我将此标题折叠到 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 代码。

提前致谢，如果之前有人问过这个问题，我很抱歉（我无法使用我的关键字找到它）。

~ 埃尔米戈

春天

您可以仅使用 css transition 制作动画：通过上面的示例，我刚刚在 opacity 上添加了 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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。