Bootstrap實現(xiàn)漸變頂部固定自適應導航欄
更新時間：2020年08月27日 10:06:10 投稿：lijiao
這篇文章給大家介紹了Bootstrap實現(xiàn)漸變頂部固定自適應導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap實現(xiàn)漸變頂部固定自適應導航欄的具體代碼，供大家參考，具體內(nèi)容如下
具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" >
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-fixed-top my-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鳥教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">Asp.Net</a></li>
</ul>
</div>
</div>
</nav>
<div class="bg"></div>
<script>
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");
}else {$(".navbar-fixed-top").removeClass("top-nav");}
})</script>
</body></html>
style.css
html, body {width:100%;height:100%;} /*非常重要的樣式讓背景圖片100%適應整個屏幕*/
.bg {display: table;width: 100%;height: 100%;padding: 100px 0;text-align: center;color: #fff;background: url(http://www.xiandanke.cn/Image/intro-bg.jpg) no-repeat bottom center;background-color: #000;background-size: cover;}
.my-navbar {padding:20px 0;transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;}
.my-navbar a{background:transparent !important;color:#fff !important}
.my-navbar a:hover {color:#45bcf9 !important;background:transparent;outline:0}
.my-navbar a {transition: color 0.5s ease-in-out;}/*-webkit-transition ;-moz-transition*/
.top-nav {padding:0;background:#000;}
button.navbar-toggle {background-color:#fbfbfb;}/*整個背景都是transparent透明的，會看不到，所以再次覆蓋一下*/
button.navbar-toggle > span.icon-bar {background-color:#dedede}
真的只用了9行代碼，原理挺簡單的，但是要注意以下幾點
1.html,body{width:100%;height:100%} ,必須寫這個樣式，才能讓html中的子元素100%占滿整個屏幕，也就是要實現(xiàn)背景圖片占滿100%的整個屏幕
2.bootstrap中的類 nav-fixed-top的意義在于固定導航欄在頂部
3.添加scroll 事件，在切換class的時候?qū)崿F(xiàn)動態(tài)的效果
4.整個效果的實現(xiàn)原理是使用了transition 屬性,transition屬性的使用方法是：
以上所述是小編給大家介紹的Bootstrap實現(xiàn)漸變頂部固定自適應導航欄，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
下面小編就為大家?guī)硪黄狫S獲取屏幕高度的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了非常平滑的JS圖片滾動特效代碼，無縫循環(huán)，速度可自定義，大家參考使用吧2014-01-01
當點擊提交后，提交按鈕變灰色不可用，這樣可有效防止重復提交，本代碼就是實現(xiàn)這樣一個功能2013-09-09
這篇文章主要介紹了JS Math對象與Math方法,結合實例形式總結分析了javascript中math對象常用屬性與方法相關使用技巧,需要的朋友可以參考下2019-07-07
HTML頁面,測試JS對C函數(shù)的調(diào)用簡單實例
下面小編就為大家?guī)硪黄狧TML頁面,測試JS對C函數(shù)的調(diào)用簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
獲取JavaScript用戶自定義類的類名稱的代碼...2007-03-03
這篇文章介紹了JS實現(xiàn)QQ圖片一閃一閃的效果小例子，有需要的朋友可以參考一下2013-07-07
這篇文章主要給大家介紹了關于js數(shù)組去重的常用方法,js數(shù)組去重是比較常見的數(shù)組操作方式之一,文中介紹了九種常用方法,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了video.js使用改變ui的過程，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
JS實現(xiàn)數(shù)組內(nèi)值累加常見的3個方法
這篇文章主要給大家介紹了關于JS實現(xiàn)數(shù)組內(nèi)值累加常見的3個方法,文中通過實例代碼將3個方法介紹的非常詳細,對大家學習或者使用js具有一定參考借鑒價值,需要的朋友可以參考下2023-07-07