Bootstrap實現漸變頂部固定自適應導航欄

2019-11-19 18:03:11

字體：大中小

來源：轉載

供稿：網友

具體代碼如下所示：

<!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%占滿整個屏幕，也就是要實現背景圖片占滿100%的整個屏幕

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

3.添加scroll 事件，在切換class的時候實現動態(tài)的效果

4.整個效果的實現原理是使用了transition 屬性,transition屬性的使用方法是：

這里寫圖片描述