快捷導(dǎo)航

Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄

更新時(shí)間：2020年08月27日 10:06:10 投稿：lijiao

這篇文章給大家介紹了Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄的具體代碼，供大家參考，具體內(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">切換導(dǎo)航</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%適應(yīng)整個(gè)屏幕*/ 
 .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;}/*整個(gè)背景都是transparent透明的，會(huì)看不到，所以再次覆蓋一下*/ 
 button.navbar-toggle > span.icon-bar {background-color:#dedede}

真的只用了9行代碼，原理挺簡(jiǎn)單的，但是要注意以下幾點(diǎn)

1.html,body{width:100%;height:100%} ,必須寫這個(gè)樣式，才能讓html中的子元素100%占滿整個(gè)屏幕，也就是要實(shí)現(xiàn)背景圖片占滿100%的整個(gè)屏幕

2.bootstrap中的類 nav-fixed-top的意義在于固定導(dǎo)航欄在頂部

3.添加scroll 事件，在切換class的時(shí)候?qū)崿F(xiàn)動(dòng)態(tài)的效果

4.整個(gè)效果的實(shí)現(xiàn)原理是使用了transition 屬性,transition屬性的使用方法是：

以上所述是小編給大家介紹的Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: