我正在建立自己的摄影网站,当用户向下滚动页面时,标题会改变。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