2
我有一個標題，一旦開始滾動就會從透明變爲藍色。一旦您再次到達頁面的頂部，標題將恢復爲透明。向下滾動時的褪色標題 - 適用於向上滾動
但現在它只是跳回到透明。可能是顯而易見的 - 但我能做些什麼來使藍色漸變變得透明？
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="">
\t <head>
\t \t <meta charset="utf-8">
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <title>Title Page</title>
\t \t <!-- Bootstrap CSS -->
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t </head>
\t <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>
\t \t <script src="http://code.jquery.com/jquery.js"></script>
\t \t <!-- Bootstrap JavaScript -->
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
\t </body>
</html>
您是否嘗試向'.navbar'添加過渡？現在只有'.navbar-inverse'的動畫效果，所以當這個類被刪除時...你失去了你的轉換效果。 –