一旦开始滚动，我的标题就会从透明淡出为蓝色。一旦您再次到达页面顶部，标题就会恢复透明。
但现在它只是跳回到透明状态。可能很明显 - 但我该怎么做才能让蓝色也很好地褪色为透明？
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(@brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
<a href="#">Back</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>最佳答案
看起来这里的问题是 CSS 转换属性包含在您到达页面顶部时添加/删除的类中(“navbar-inverse”)。当您添加类时，过渡将会起作用，但是删除它会导致您看到的透明度突然发生变化。
相反，尝试将转换放入单独的“.navbar”类中，并将其从“navbar-inverse”中删除，如下所示:
.navbar{
transition: all .5s linear;
}
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(@brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar{
transition: all .5s linear;
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
<a href="#">Back</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>关于javascript - 向下滚动时标题褪色 - 也适用于向上滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38375704/