部落格園裝飾——（一）置頂選單欄
部落格園裝飾——（一）置頂選單欄
一、功能描述
1.1 文字描述
- 當頁面向下滾動到選單欄上邊沿觸碰到瀏覽器視窗上邊沿時，選單欄會固定地顯示在瀏覽器視窗上方(貼緊)，即達到了置頂選單欄的效果。而當頁面向上滾動到原來的位置時，選單欄又會自動返回文件流，即回到初始的位置。
1.2 圖片效果展示
1.2.1 例程(demo)效果展示
1.2.2 本人部落格園效果展示
有現成的效果喲~你確定不試一哈？
二、 程式碼展示
2.1 html 部分
<body> <div id="header"> <div class="else"></div> <div id="navigator">選單欄</div> </div> <br> <br> <br> (div.text+br*10)*10 <!-- 上面這一句意思是以下程式碼塊重複10遍，用上面的縮寫是為了在寫部落格時控制篇幅 <div class="text">文字內容</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> --> </body>
我們的選單欄(id="navigator")的div盒子，是在(id="header")的盒子內部
2.2 CSS 部分
<style type="text/css"> body{ padding: 0px; margin:0px; } #header{ width:100%; /*background-color: lightblue;*/ } #navigator, #navigator1{ width:100%; background-color:gold; text-align: center; height:150px; font:bold 75px/150px 'Microsoft Yahei'; /*opacity: 0.5;*/ } /*用於當navigator脫離文件流時，navigator1來進行填充原來的空位*/ #navigator1{ /*由於剛開始，navigator(即選單欄)沒有脫離文件流，所以先不展示navigator1*/ display:none; } .else{ width:100%; height:200px; background-color: green; } .text{ text-align: center; font:bold 25px/25px 'Microsoft Yahei'; } </style>
由於"navigator1"部落格園自帶的html標籤沒有使用這個ID選擇器（因為這是我們自己新增的一個選擇器，為了當"navigator"脫離文件流時對原位置進行填充），所以我們需要下面的js程式碼來寫入一個div標籤，並且應用該ID選擇器。具體原因，請看下面的重難點詳解。
2.3 JS 部分
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 獲取header這個標籤元素 var $header = $('#header'); $header.html( $header.html() + '<div id="navigator1"></div>' ); var $navigator = $('#navigator'); var $navigator1 = $('#navigator1'); $(window).scroll(function(){ var $iNum = $(document).scrollTop(); //監控頁面滾動距離，並顯示在標籤頁上 // document.title = $iNum; // 200 觸發事件 // 200 非固定值，根據自己的需要修改，最好就是滾動到選單欄上邊沿時觸發 if ( $iNum >= 200){ /* 當頁面滾動200px時，為navigator寫入樣式，使其固定定位到瀏覽器視窗上邊沿 此時會發生脫離文件流現象 */ $navigator.css({ 'position':'fixed', 'top':0 }) // 相當於將navigator1的display的"none"改成"block" $navigator1.show(); } else{ /*設定為未定位，返回文件流*/ $navigator.css({ 'position':'static' }) // 設定回"none"，即隱藏 $navigator1.hide(); } }) }) </script>
由於部落格園原文件流當中沒有"<div id="navigator1"></div>"這一句，所以需要通過js寫入
三、重難點詳解
3.1 頁面內容跳變現象(脫離文件流)
3.1.1 動圖演示
你會發現~♪選單欄下面的“文件內容”這一行字會突然跳到選單欄三個大字中間，這就是我所說的所謂的跳變現象，那這是為什麼呢？
3.1.2 原因
如果你能看到這，答案相信已經很明瞭了，就是因為選單欄應用了固定定位以後，發生了脫離文件流現象，導致外面的盒子header的高度變小了，從而使得下面的內容自動往上排版，從而出現頁面內容跳變的現象。
3.1.3 解決方法
① 利用 js 獲取 header 元素，通過 xxx.html( ) 方法寫入"<div id="navigator1"></div>"
② 在CSS部分中，讓"navigator1"應用相同的樣式（保證佔據與選單欄相同的高度），並且先不展示（display:none;）
③ 當"navigator"脫離文件流以後，讓"navigator1"展示出來，佔據（填充）原來"navigator"的位置，從而達到克服頁面跳變現象。
3.1.4 引入 "navigator1" 填充後動圖演示
四、總結與後言
整體設計思路也並不複雜，主要注意脫離文件流以後導致的跳變現象。由於可能每個部落格的樣式與具體html文件內容不同，所以博主我在這裡只提供了一個demo，大致的原理已經提及了。大家可以先通過demo自己研究一遍，再進行設計，畢竟自己設計的才是最符合自己心意的，並且能從中學到新知識。
博主還有其他幾篇關於部落格園裝飾的文章，可供觀看喲~
部落格園裝飾——（三）部落格園導航目錄（待更新）