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

Question

我正在构建自己的摄影网站，其中 header 会在用户向下滚动页面时发生变化。 HTML menu/header 看起来像这样：

<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

做一个class

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

Add/remove在适当的时候

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

此外，您可以通过使用 class 更改高度将所有这些移动到 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 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

如果您想为 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>

Answer 4

您可以使用 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

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

javascript on scrolltop animate div height + background color

html

javascript

css

jquery

jquery-animate