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 个像素时，我将此标题折叠为 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 过渡制作动画： 通过上面的示例，我刚刚在不透明度上添加了过渡属性 我设法在滚动时更改它。

不是我设置和 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

Answer 2

我想说 amflare 的回答几乎是正确的。我会从 javascript 中完全删除 animate 并这样做：

CSS：

.darkerbg {
  height: 75px;
  background-color: rgba(0,0,0,0.5);
}

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

JAVASCRIPT：

if (scrollTop > 5) {
  $('#menu').addClass('darkerbg');
}
else {
  $('#menu').removeClass('darkerbg');
}

Answer 3

创建一个类

.darkerbg {
  background-color: rgba(0,0,0,0.5);
}

在适当的时候添加/删除它

if (scrollTop > 5) {
  $('#menu').stop().animate({height: "75px"},150);
  $('#menu').addClass('darkerbg');
}
else {
  $('#menu').stop().animate({height: "100px"},150);
  $('#menu').removeClass('darkerbg');
}

---

此外，您可以通过改变类的高度将所有这些移到 CSS 中，如下所示：

.menu {
  //various properties
  transform: all 0.1s; // this provides the animation effect
}
.big {
  height: 100px;
  background-color: rgba(0,0,0,0.1);
}
.small {
  height: 75px;
  background-color: rgba(0,0,0,0.5);
}

然后用 JS 做这个：

if (scrollTop > 5 && !$('#menu).hasClass('small')) {
  $('#menu').removeClass('big'); //just incase it is there
  $('#menu').addClass('small');
} else if (scrollTop <= 5 && !$('#menu).hasClass('big')) {
  $('#menu').removeClass('small'); //just incase it is there
  $('#menu').addClass('big');
}

Answer 4

如果你想动画background-color的变化，你可以使用jquery-ui插件：jQuery UI。我发现它非常有用，而且运行起来非常漂亮。

例如：

首先，在您的项目中包含jQuery UI：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="></script>

并将Javascript 内容更改为：

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