通欄導航欄的制作，綜合使用CSS屬性，代碼不超過30行

篇文章，小海老師帶領大家一同做一個利用CSS技術實現的導航欄。通過這個導航欄的制作，希望大家能夠對前幾篇文章中學習到的CSS屬性能有一個整體的認識，并能夠達到靈活運用的程度。

承接文章：靈活控制塊級元素在一行內顯示，CSS浮動屬性，知道原理就很簡單

技術等級：初級 | 適合前端開發的初學者閱讀學習。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

如果你是初學前端開發，強烈建議跟著文章中講的步驟自己做一做。步驟不多，思路簡單，占用不了大家太多的時間，自己做一遍，一定會收獲不少。

一、導航欄效果圖展示：

今天我們要做的導航欄效果如下圖所示。

導航欄效果圖展示

這個效果主要使用的是<ul></ul>標記對和<a></a>標記對共同實現的。

整個實例涉及到的CSS屬性如下所示：

width
height
background-color
list-style-type
display
float
margin
line-height

二、實現頁面效果：

首先為導航欄設置一個<div>容器，并設置其id屬性的取值設置為nav。該容器用來控制導航欄的通欄位置。通欄的容器寬度應該設置為100%，這里高度設置為40px，顏色為#a72f2e。實現代碼如下所示：

<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}

由于要在通欄的容器中顯示固定寬度為1000px的導航欄主體，因此在該容器內部再制作一個<div>容器，用來盛放真正的導航欄代碼。我們將它的class屬性取值為navContent。這個容器的寬度設置為1000px，高度與#nav的高度等高，并且在#nav容器內部水平居中。實現代碼如下所示：

<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}

接下來在.navContent容器內部書寫導航欄的各個條目。導航欄是使用<ul></ul>標記對實現的，而它的導航欄條目是利用<li></li>標記對書寫的。因為導航欄需要單擊后跳轉頁面，所以在<li></li>內部使用了<a></a>標記對。

這里要說明一點，因為<li></li>標記對是塊級元素，<a></a>標記對是內聯元素，因此要讓<li></li>標記對包裹<a></a>標記對，不要用<a></a>標記對包裹<li></li>標記對。

這里以導航欄條目“首頁”和“網站介紹”為例，下列HTML代碼展示了導航欄的條目內容。

<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="#">網站簡介</a></li>
…
</ul>

需要更多的導航欄條目，可以在<ul>標記對內部重復書寫<li></li>和<a></a>的代碼格式。

三、編寫整個導航欄的CSS樣式：

整個導航欄是使用<ul></ul>標記對實現的，所以需要對<ul></ul>標記對編寫CSS樣式。

由于無序列表的列表項左側帶有小圓點的項目符號，因此需要將該項目符號去掉。所以<ul></ul>標記對的CSS代碼如下所示：

#nav .navContent ul{
list-style-type:none;
}

四、編寫導航欄條目的CSS樣式：

導航欄條目是使用<li></li>標記對實現的，所以需要對<li></li>標記對編寫CSS樣式。

由于<li></li>標記對是塊級元素，因此即使去掉了左側的項目符號，所有的條目依然都各自獨占一行顯示，所以需要讓它們在一行內顯示，這就需要讓所有的<li></li>標記對左浮動。CSS代碼如下所示：

#nav .navContent ul li{
float:left;
}

五、編寫導航欄條目中鏈接的CSS樣式：

導航欄條目中的鏈接是使用<a></a>標記對實現的，所以需要對<a></a>標記對編寫CSS樣式。

由于<a></a>標記對是內聯元素，因此無法設置寬度和高度，也就無法為每一個導航欄條目設置尺寸。因此需要將<a></a>標記對轉換為塊級元素（display屬性），然后設置寬度和高度（width屬性和height屬性）。

有了寬度和高度，就需要讓鏈接的文本在容器中水平居中（text-align屬性）和垂直居中（line-height屬性）了。

最后去掉鏈接的下劃線（text-decoration屬性），并設置鏈接的文本顏色（color屬性）。

導航欄條目中鏈接的CSS代碼如下所示：

#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}

六、編寫鼠標經過導航欄條目時的CSS樣式：

鼠標經過導航欄目時，即使沒有觸碰到鏈接的文本部分，也應該能夠進行跳轉。因此需要對<a></a>標記對編寫鼠標經過時的CSS樣式。

鼠標經過時，希望背景顏色（background-color屬性）和文本顏色（color屬性）發生變化。

鼠標經過鏈接時的CSS代碼如下所示：

#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}

七、整體代碼：

至此，這個簡單的導航欄效果就完全實現了，CSS整體使用了約30行代碼。實現這個導航欄效果的HTML代碼如下圖所示。

HTML整體代碼

實現這個導航欄效果的CSS代碼如下圖所示。

CSS整體代碼

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

下一次，小海老師開始為大家講解CSS的盒屬性。盒屬性是div布局的基礎，在實際的布局過程中有許多應用技巧。下一篇文章我會為大家將盒屬性一個一個進行詳細的分析。

近忙里偷閑，給自己加油充電的時候，發現自己腦海中布局這塊非常的凌亂混雜，于是花了一些時間將一些常用的布局及其實現方法整理梳理了出來，在這里，分享給大家。

單列布局

單列布局是最常用的一種布局，一般是將一個元素作為容器，設置一個固定的寬度，水平居中對齊。

單列布局一般有兩種形式：

(圖片來源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一欄布局

一欄布局頭部、內容、底部寬度一致

效果圖

代碼實現

html

<header></header>
<main></main>
<footer></footer>
復制代碼

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
復制代碼

一欄布局（通欄）

一欄布局（通欄）頭部和底部寬度一致，占滿整個頁面，中間內容區域寬度較小不占滿屏幕。

效果圖

代碼實現

html

<header></header>
<main></main>
<footer></footer>
復制代碼

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
復制代碼

單列布局是最為基礎和簡單的一種，實現方法并不局限于以上兩種，大家可自由發揮，找到更多的方法來實現。

2列布局

2列布局的使用頻率也非常高，其實現效果主要就是將頁面分割成左右寬度不等的兩列。一般寬度較小的一列會設置為固定寬度，作為側邊欄之類的，而另一列則充滿剩余寬度，作為內容區。

在后臺管理系統及api文檔中使用較為廣泛。

效果圖

先來看看效果：

代碼實現

實現兩列布局的方法有很多，這里主要介紹兩種方法。

calc函數

calc() 函數用于動態計算長度值。實現思路很簡單，側邊欄寬度固定，設置絕對定位，使其脫離文檔流，內容區域通過calc()函數計算剩余寬度并設置寬度，再加一個margin-left，值為側邊欄的寬度。

代碼如下：

html

<div class="slider"></div>
<div class="main"></div>
復制代碼

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}
復制代碼

flex屬性

通過flex屬性實現思路也很簡單，將父元素設置為flex，側邊欄寬度固定，內容區域設置flex:1即可充滿剩余區域。

代碼如下：

html

<div class="slider"></div>
<div class="main"></div>
復制代碼

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}
復制代碼

3列布局

3 列布局在日常開發中使用頻率也是很高的，其按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應，能根據屏幕大小做響應。

效果圖

還是先來看看效果圖

代碼實現

三列布局的實現方法也很多，這里主要介紹兩種（雙飛翼布局、圣杯布局、flex布局）

在介紹雙飛翼布局和圣杯布局之前要先說一下margin設置負值的作用：

當margin的值設為負值的時候，元素會對應的像那個放向移動，比如margin-left為負值，元素則會左移

雙飛翼布局

代碼如下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中間
        </div>
    </div>
    <div class="left">
        左邊
    </div>
    <div class="right">
        右邊
    </div>
</div>
復制代碼

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}
復制代碼

圣杯布局

代碼如下: html

<div class="main">
    <div class="center">中間中間中間中間中間中間中間后</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
復制代碼

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}
復制代碼

雙飛翼布局其實和圣杯布局的精髓是一樣的，都是通過設置負margin來實現元素的排布，不同的就是html結構，雙飛翼是在center元素內部又設置了一層inner-center的元素并設置它的左右margin，而非圣杯布局的padding，來排除兩邊元素的覆蓋。所以這兩種布局原理基本一樣，關鍵就是在于設置負margin的技巧，和元素浮動的相對定位技巧來實現。

flex布局

代碼如下: html

<div class="main">
    <div id="left">左邊定寬</div>
    <div id="main">中間自適應</div>
    <div id="right">右邊定寬</div>
</div>
復制代碼

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}
復制代碼

如果不考慮瀏覽器兼容問題的話，運用flex布局是最簡單的方式。

垂直方向的布局（sticky footer）

這種布局將頁面分成上、中、下三個部分，上、下部分都為固定高度，中間部分高度不定。當頁面高度小于瀏覽器高度時，下部分應固定在屏幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。

這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。

代碼實現

首先我們先構建簡單的HTML代碼

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>
復制代碼

其中content為我們的內容區。下面開始介紹解決方法。

為內容區域添加最小的高度

這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內容區域的最小高度。例如我們可以添加如下樣式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}  
復制代碼

從而這個問題就解決了，但是如果頁面的footer高度不同怎么辦?每一個頁面都要重新計算一次，這是很麻煩的，所以這種方法雖然簡單但卻是不推薦的。

使用flex布局

這種方法就是利用flex布局對視窗高度進行分割。footer的flex設為0，這樣footer獲得其固有的高度;content的flex設為1，這樣它會充滿除去footer的其他部分。

代碼如下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
復制代碼

這樣的布局簡單使用，比較推薦。

在content的外面可以添加一個wrapper

這種方法就是在content的外面添加一個包裹容易，將html代碼改成這樣：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
復制代碼

然后添加以下樣式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必須使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;
}
復制代碼

另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
復制代碼

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
復制代碼

ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結構。

粘性布局（sticky）

粘性布局是什么呢？我們先來看看效果演示

沒錯，其實就是在頁面滾動的時候保持元素（這里的是標題）在頁面視圖上方，也就是我們常常看到的吸附效果。

標題行設置了背景色。如果不設置背景色（背景透明），正常文檔流的文字就會和標題行文字重疊在一起顯示。

sticky定位的元素會遮住滾動而來的“正常”的文檔流；后面的sticky元素會覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。

代碼實現

實現粘性布局主要依靠position的sticky屬性。

position: sticky;
復制代碼

先來看看兼容性：

從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時候要慎重考慮，如果不要求兼容的情況，用這個還是相當的舒服了。

下面給出一個簡單的示例。

html:

<main>
    <header>標題一</header>
    <div class="content">
    </div>
    <header>標題二</header>
    <div class="content">
    </div>
    <header>標題三</header>
    <div class="content">
    </div>
    <header>標題四</header>
    <div class="content">
    </div>
</main>
復制代碼

js(不想寫太多p標簽，所以用js生成，偷個懶):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})
復制代碼

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
復制代碼

作者：monkeysoft
鏈接：https://juejin.cn/post/6907027007318687751
來源：掘金

面兩篇文章為大家詳細講解了相對定位與絕對定位的應用場景和案例。如果想了解的可以在公眾號里面查看去看。本小節我們學習下固定定位與粘性定位的應用場景和案例。

屬性值	描述
relative 相對定位	相對于自身正常位置進行位置的調整
absolute 絕對定位	相對于其最近的定位的父元素進行位置調整。
fixed 固定定位	相對于瀏覽器窗口進行位置調整
sticky 粘性定位	是基于用戶的滾動位置來定位。

固定定位

相對于瀏覽器窗口進行定位，其它與絕對定位的特性一致。

常見的應用有：樓梯式導航、瀏覽器右側菜單、底部通欄、全屏黑色半透明遮罩彈出層、彈出注冊和登錄框、左上固定右自適應后臺管理系統布局

粘性定位

當滾動的高度>元素與瀏覽器的高度時，會以fixed固定定位顯示。
當滾動高度<元素與瀏覽器高度時，會以relative相對定位顯示。

常見的應用有：吸頂盒導航,滾動吸附效果

1、樓梯式導航、瀏覽器右側菜單、底部通欄（固定定位應用）

這三個案例用都是用固定定位來控制其與瀏覽器位置。最難是樓梯式導航的js部分

<style>
       body,ul,li{
           margin:0;
           padding: 0;
      }
       .header,.footer{
           height: 200px;
           background-color: skyblue;
      }
       .container{
           width: 1280px;
           margin:20px auto;
      }
       .container .item:nth-child(odd){
           height:600px;
           background-color:yellow;
      }
       .container .item:nth-child(even){
           height:700px;/*代碼來自-艾編程-清心*/
           background-color:darkturquoise;
      }
       ul.louti{
           list-style: none;
           width: 100px;
           padding:0px 10px;
           border: 1px solid #ddd;
           border-radius: 10px;
           background-color: #fff;
           position: fixed;/*通過固定定位來控制樓梯式導航的位置*/
           top:300px;
           left:50px;
      }
       ul.louti li{
           height: 30px;
           line-height: 30px;
           text-align: center;
           border-bottom:1px solid #ddd;
           cursor: pointer;
      }
       ul.louti li:last-child{
           border:none;
      }
       ul.louti li.current{
           background-color: palevioletred;
           color:#fff;
      }
   </style>
<body>
   <div class="header"></div>
   <div class="container">
       <div class="item">頻道內容</div>
       <div class="item">番劇內容</div>
       <div class="item">電影內容</div>
       <div class="item">國創內容</div>
       <div class="item">電視劇內容</div>
   </div>
   <div class="footer"></div>
   <ul class="louti"><!--樓梯式導航 固定定位-->
       <li class="current">頻道</li>
       <li>番劇</li>
       <li>電影</li>
       <li>國創</li>
       <li>電視劇</li>
   </ul>
</body>

<script>
   var itemTop=[];//用來保存每個區塊與頁面頂部距離
   var itemHeight=[]
   var oItem=document.querySelectorAll('.container .item')
   var oLi=document.querySelectorAll('.louti li');
   var len=oItem.length;
   var dirSpeed=20;//定義方向和速度
   var flag=-1;//提高性能優化標簽
   var scrollTop=0;//保存瀏覽器滾動高
   var timer=null;//全局定時器
   //把每個盒子與瀏覽器頂部距離,和高度分別保存到數組中
   for(var i=0;i<len ;i++){
       itemTop.push(oItem[i].offsetTop);
       itemHeight.push(oItem[i].clientHeight);
  }
   window.onscroll=function(){//滾動瀏覽器滾動條
       //獲取滾動條滾動的高度
       scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
       for(var i=0;i<len;i++){
           if(parseInt(scrollTop)<=parseInt(itemTop[i]+itemHeight[i]/3)){
               break;
          }/*代碼來自-艾編程-清心*/
      }
       if(flag!=i){//如果在當前樓層滾動，則不會重復執行代碼
           flag=i;
           for(var j=0;j<len;j++){
               oLi[j].className='';
          }
               oLi[i].className='current';
      }
  }
   for(var j=0;j<oLi.length;j++){
       oLi[j].index=j;//保存序列號，后面方便使用
       oLi[j].onclick=function(){//給導航加點擊事件
           clearInterval(timer);//清除定時器
           var that=this;//保存this
           //首先要獲取當前滾動條高度
           scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
           scrollTop>=itemTop[that.index]+itemHeight[that.index]/3?dirSpeed=-20:dirSpeed=20;
           timer=setInterval(function(){/*代碼來自-艾編程-清心*/
               scrollTop+=dirSpeed;
               if(scrollTop<=itemTop[that.index]+itemHeight[that.index]/3 && dirSpeed<0 || scrollTop>=itemTop[that.index]+itemHeight[that.index]/3 && dirSpeed>0){
                   scrollTop=itemTop[that.index]+itemHeight[that.index]/3;
                   clearInterval(timer);
              }
              (document.documentElement.scrollTop=scrollTop) || (document.body.scrollTop=scrollTop);
          },5)    
  }
}
</script>

2、視頻彈窗播放效果（固定定位應用）

這個效果中黑色的半透明遮罩層和彈出的視頻都是相對于瀏覽器來固定定位的。彈出登錄注冊框的原理和這個是一樣的。這里以相對較為復雜的視頻彈窗效是為例來講解。

<style>
       .video{
           width:300px;
           height: 200px;
      }
       .video img{
           width: 100%;
           height: 100%;
           object-fit: cover;
           cursor: pointer;
      }
       .mask{
           background-color: rgba(0,0,0,0.5);
           position: fixed;
           top:0px;
           bottom:0px;
           left:0px;
           right:0px;            
           display: none;
      }
       .mask video{
           position: fixed;
           left:50%;
           top:50%;
           transform:translateX(-50%) translateY(-50%);
      }
   </style>
<body>
   <!--視頻播放列表-->
   <div class="video"><!--data-src放著對應的視頻地址-->
       <img src='images/mz8.jpg' data-src="mp4/meizu.mp4"></video>
   </div>
   <div class="mask"><!--黑色半透明遮罩層-->
       <video src="" controls width="70%"></video><!--視頻-->
   </div>
   <script>
       var img=document.querySelector('.video img');
       var mask=document.querySelector('.mask');
       var video=document.querySelector('.mask video')
       img.onclick=function(){
           mask.style.display='block';
           video.src=this.dataset.src;//將視頻地址賦值給視頻播放器
           //視頻彈出后，立馬自動播放
           video.play();
      }
   </script>
</body>

3、左邊和頂部固定，右自適應后臺管理界面布局

（固定定位應用）

頂部導航和左側菜單相對于瀏覽器固定定位。右側的內容區則自適應瀏覽器的寬度

<style>
   body{
       margin:0;
  }
   .top{
       height: 100px;
       position: fixed;/*固定定位 要實現水平自適應，就不要加寬*/
       left:10px;
       right:10px;
       top:0px;
       background-color: pink;
       border-radius: 10px;
  }
   .siderbar{
       width: 250px;
       position: fixed;/*固定定位 要實現垂直自適應，就不要加高*/
       left:10px;
       top:110px;
       bottom:10px;
       background-color: pink;
       border-radius: 10px;
  }
   .main{
       margin:110px 10px 0px 270px;/*水平自適應，不要加寬*/
       min-height:900px;
       background-color: skyblue;
  }
</style>
<body>
   <div class="top"></div><!--頂部-->
   <div class="siderbar"></div><!--左側邊欄-->
   <div class="main"></div><!--主內容區-->
</body>

4、吸頂盒導航和常見左右吸附效果(粘性定位)

由于粘性定義目前只有火狐和Safari瀏覽器支持，但是這種效果在實際企業開發中必用。所以我們通常會用JS來實現，以下是完整效果的源碼。

<style>
   body{
       margin: 0;
       min-width: 1280px;
  }
   .top{
       height: 70px;
       width: 100%;
       background-color: #000;
  }
   .header{
       height: 100px;
       width:100%;
       background-color: pink;
       /* position: sticky; 兼容問題
      position: -webkit-sticky; */
       top:0;
       text-align: center;
       line-height: 100px;
  }
   .container{
       width: 1280px;
       margin:20px auto;
  }/*代碼來自-艾編程-清心*/
   .container .main{
       width:1000px;
       min-height: 2000px;
       background-color: #ddd;
       float:left;
  }
   .container .siderbar{
       width:250px;
       float:right;
  }
   .container .siderbar .item{
       height: 200px;
       background-color: khaki;
       margin-bottom:20px;
  }
   .container .siderbar .ceiling{
       height: 200px;
       width: 250px;
       background-color: tomato;
       /* position: sticky;
      position: -webkit-sticky; */
  }
</style>
<body>
   <div class="top"></div>
   <div class="header"></div> <!--吸附塊-->
   <div class="container">
       <div class="main"></div>
       <div class="siderbar">
           <div class="item"></div>
           <div class="item"></div>
           <div class="ceiling"></div> <!--吸附塊-->
       </div>
   </div>
   <script>
       var header=document.querySelector('.header');
       var ceiling=document.querySelector('.ceiling');
       var _top=header.offsetTop;/*元素與瀏覽器頂部距離*/
       var _top2=ceiling.offsetTop-header.clientHeight-110;//這里要記得減掉header高度和與頂部高度，因為header在前，定位后不占空間
       console.log(_top2)
       window.onscroll=function(){
           var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
           console.log(scrollTop)
           scrollTop>=_top?(header.style.position='fixed'):(header.style.position='relative');
           if(scrollTop>=_top2){/*代碼來自-艾編程-清心*/
               ceiling.style.position='fixed';/*設置固定定位*/
               ceiling.style.top="110px";/*top值*/
          }else{
               ceiling.style.position='relative';
               ceiling.style.top='0px';
          }
      }
   </script>
</body>

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

在線咨詢

上一篇：你用過哪些好用的HTML轉markdown工具？
下一篇：50行Python代碼繪制數據大屏，這個可視化框架真的太神了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

通欄導航欄的制作，綜合使用CSS屬性，代碼不超過30行

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

小海教材

小海聲明

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

文章預告

單列布局

一欄布局

效果圖

代碼實現

一欄布局（通欄）

效果圖

代碼實現

2列布局

效果圖

代碼實現

calc函數

flex屬性

3列布局

效果圖

代碼實現

雙飛翼布局

圣杯布局

flex布局

垂直方向的布局（sticky footer）

代碼實現

為內容區域添加最小的高度

使用flex布局

在content的外面可以添加一個wrapper

粘性布局（sticky）

代碼實現

1、樓梯式導航、瀏覽器右側菜單、底部通欄（固定定位應用）

2、視頻彈窗播放效果（固定定位應用）

3、左邊和頂部固定，右自適應后臺管理界面布局

（固定定位應用）

4、吸頂盒導航和常見左右吸附效果(粘性定位)

您的項目需求