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%} ,必須寫(xiě)這個(gè)樣式，才能讓html中的子元素100%占滿(mǎn)整個(gè)屏幕，也就是要實(shí)現(xiàn)背景圖片占滿(mǎn)100%的整個(gè)屏幕

2.bootstrap中的類(lèi) 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)航欄”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！