如果背景是颜色 header-fixed-position,颜色淡入,如果背景是图像,图像不淡入。
对不起,我的英语不好,请参阅下面的示例代码。 尝试在 CSS 中删除评论背景图像。
$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
$('#header').addClass('headtop');
} else {
$('#header').removeClass('headtop');
}
});
#header {
transition: all 1s ease;
}
.headtop {
z-index: 997;
position: fixed;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
top: 0;
background-color: #aaaaaa;
/*background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);*/
border-radius: 0px 0px 25px 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="header" class="container">
<h1>this is header</h1>
</div>
<div class="container">
<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content
</div>
最佳答案
您可以通过添加带有背景图像的 div 并使用不透明度 0 到 1 过渡来实现。
这是您的代码示例:
$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
$('#header').addClass('headtop');
} else {
$('#header').removeClass('headtop');
}
});
#header {
transition: all 1s ease;
}
.headtop {
z-index: 997;
position: fixed;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
top: 0;
background-color: #aaaaaa;
border-radius: 0px 0px 25px 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
opacity:1 !important;
}
#header .background {
z-index: -1;
position:absolute;
width:100%;
height: 69px;
transition: all 1s ease;
border-radius: 0px 0px 25px 25px;
background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);
top: 0;
opacity:0;
}
.headtop .background {
opacity:1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="header">
<div class="background"></div>
<h1>this is header</h1>
</div>
<div class="container">
<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content<br>this is content
</div>
关于javascript - 添加类时我想要背景图像过渡淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50183424/