1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css"> 8 body { 9 padding:0; 10 margin:0; 11 } 12 #nav { 13 width:100%; 14 height:60px; 15 background:#39f; 16 color:#fff; 17 line-height:60px; 18 text-align:center; 19 padding:0; 20 margin:0; 21 list-style:none; 22 } 23 #nav li { 24 float:left; 25 width:20%; 26 height:60px; 27 } 28 .fix { 29 position:fixed; 30 top:0; 31 left:0; 32 } 33 </style> 34 </head> 35 36 <div class="wrap"> 37 <h1>在線書城</h1> 38 <p>有沒有一本書讓你仿佛遇到春風十里</p> 39 <ul id="nav"> 40 <li>加入購物車</li> 41 <li>加入收藏</li> 42 <li>立即購買</li> 43 </ul> 44 <div class="con"> 45 <p>好書有好事有好詩</p> 46 <p>好書有好事有好詩</p> 47 <p>好書有好事有好詩</p> 48 <p>好書有好事有好詩</p> 49 <p>好書有好事有好詩</p> 50 <p>好書有好事有好詩</p> 51 <p>好書有好事有好詩</p> 52 <p>好書有好事有好詩</p> 53 <p>好書有好事有好詩</p> 54 <p>好書有好事有好詩</p> 55 <p>好書有好事有好詩</p> 56 <p>好書有好事有好詩</p> 57 <p>好書有好事有好詩</p> 58 <p>好書有好事有好詩</p> 59 <p>好書有好事有好詩</p> 60 <p>好書有好事有好詩</p> 61 <p>好書有好事有好詩</p> 62 <p>好書有好事有好詩</p> 63 <p>好書有好事有好詩</p> 64 <p>好書有好事有好詩</p> 65 <p>好書有好事有好詩</p> 66 <p>好書有好事有好詩</p> 67 <p>好書有好事有好詩</p> 68 <p>好書有好事有好詩</p> 69 <p>好書有好事有好詩</p> 70 <p>好書有好事有好詩</p> 71 <p>好書有好事有好詩</p> 72 </div> 73 </div> 74 75 <script type="text/javascript"> 76 var tit = document.getElementById("nav"); 77 //alert(tit); 78 //占位符的位置 79 var rect = tit.getBoundingClientRect();//獲得頁面中導航條相對於瀏覽器視窗的位置 80 var inser = document.createElement("div"); 81 tit.parentNode.replaceChild(inser,tit); 82 inser.appendChild(tit); 83 inser.style.height = rect.height + "px"; 84 85 //獲取距離頁面頂端的距離 86 var titleTop = tit.offsetTop; 87 //滾動事件 88 document.onscroll = function(){ 89 //獲取當前滾動的距離 90 var btop = document.body.scrollTop||document.documentElement.scrollTop; 91 //如果滾動距離大於導航條據頂部的距離 92 if(btop>titleTop){ 93 //為導航條設置fix 94 tit.className = "clearfix fix"; 95 }else{ 96 //移除fixed 97 tit.className = "clearfix"; 98 } 99 } 100 </script> 101 </html>
當頁面向下滾動時超過了吸頂導航的初始位置時，需要把吸頂導航欄固定在窗口頂部，一般吸頂導航欄還可以替換成文章標題欄，搜索框、tab條等等，例如百度糯米，天貓，淘寶最為常用。它們共同點是在內容或者功能上比較重要，但又不是最重要的元素，最重要的一般會放置於頂部。
1.實現思路是監聽 scroll 事件，判斷當前頁面的滾動位置，當滾動距離大於導航條距頂部的距離時，為導航條采用窗口定位。
2.與“回到頂部“的實現方法一樣，但是會發現實現吸頂功能時，到了臨界位置時，頁面會抖動一下，因為當導航條fixed出去，下部內容填補了導航條離開的位置。搶占了導航條的位置，所以抖動了一下。此處我們設置一個占位符，守住導航條的位置。
效果如下：
