我的页面上有这个引导程序导航:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
...
...
我也有这个jQuery代码在固定和经典导航栏之间切换。
$(document).on("scroll",function(){
if($(document).scrollTop()>20) {
$("nav").addClass("navbar-fixed-top");
} else {
$("nav").removeClass("navbar-fixed-top");
}
});
虽然它切换正常,但变化相当突然,我想添加过渡到它。我尝试将此添加到css但它不起作用。我怎样才能在它们之间转换?
nav{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
答案 0 :(得分:0)
我创建的示例代码位于 CODEPEN
HTML:
<nav id="mainNav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Demo Header -->
<header>
<h1>Bootstrap Collapsing Animated Navigation</h1>
</header>
JS:
$(document).on("scroll", function() {
if ($(document).scrollTop() > 0) {
$("nav").addClass("navbar-fixed-top");
} else {
$("nav").removeClass("navbar-fixed-top");
}
});
CSS:
.navbar-default {
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
padding: 15px 0;
margin-bottom: 0;
}
.navbar-fixed-top {
border: 1px solid transparent;
padding: 5px 0;
}
header {
padding: 300px;
text-align: center;
background-image: url(https://unsplash.it/800?image=974
);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header h1 {
color: white;
font-size: 2em;
}
我希望它可能会有所帮助。
享受:)