我正在建立自己的摄影网站,当用户向下滚动页面时,标题会改变。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代码。
提前谢谢,如果之前有人问过这个问题,我很抱歉(我用关键字找不到)。
~Elmigo

最佳答案

您可以使用css转换创建周年纪念:
在上面的例子中,我刚刚在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

10-05 20:17
查看更多