js實現導航固定定位
阿新 • • 發佈：2018-12-15
int scrolltop nav text 關於我 block urn center 廣告欄
js實現導航固定定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>內容滾動事件</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 list-style: none; 13 } 14 html,body{ 15 width: 100%; 16 } 17 .header{ 18 height: 130px; 19 background: red; 20 font: 700 28px/130px serif; 21 color: aqua; 22 text-align: center; 23 } 24 .nav{ 25 height: 60px; 26 width: 100%; 27 background: green; 28 font: 700 24px/60px serif; 29color: rgb(240, 240, 14); 30 text-align: center; 31 } 32 ul{ 33 display: inline-block; 34 } 35 li{ 36 float: left; 37 margin-left: 60px; 38 39 } 40 .content1, 41 .content2, 42 .content3 { 43 height: 500px; 44 background: #DFFCB5; 45 font: 400 60px/800px serif; 46 color: #52524E; 47 text-align: center; 48 } 49 .content2 { 50 background: #FFE1B6; 51 } 52 .content3 { 53 background: #CDE3EB; 54 } 55 .fixed { 56 position: fixed; 57 top: 0; 58 left: 0; 59 } 60 61 </style> 62 </head> 63 <body> 64 <div class="header" id="header"> 65 頂部廣告欄 66 </div> 67 <div class="nav" id="nav"> 68 <ul> 69 <li>主頁</li> 70 <li>商城</li> 71 <li>產品展示</li> 72 <li>服務</li> 73 <li>關於我們</li> 74 </ul> 75 </div> 76 <div class="content1" id="con"> 77 內容1 78 </div> 79 <div class="content2"> 80 內容2 81 </div> 82 <div class="content3"> 83 內容3 84 </div> 85 </body> 86 </html> 87 <script> 88 var header = document.getElementById(‘header‘); 89 var nav = document.getElementById(‘nav‘); 90 var content = document.getElementById(‘con‘); 91 92 // 封裝一個scrollTop兼容性函數 93 function getScrollTop() { 94 return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 95 } 96 97 // 給頁面註冊滾動事件 98 window.onscroll = function() { 99 // 判斷廣告欄header 與 滾動的scrollTop的值 100 // 當scrollTop > header高度的時候 讓導航欄 nav 固定定位 101 var scrollTop = getScrollTop(); 102 if (scrollTop >= header.offsetHeight) { 103 // 樣式中有的類名這裏一定不要忘了加上去，否則就會被替換掉 104 nav.className = "nav fixed"; 105 // 一旦標題欄設置了固定定位之後，就脫離標準流了，下面的內容就會頂上來， 106 // 所以要手動給下面的內容添加一個margin-top，將導航欄的位置留下來 107 content.style.marginTop = nav.offsetHeight + "px"; 108 } else { 109 // 當scrollTop < header高度的時候 讓導航欄 nav 恢復到原來的位置 110 // nav 取消固定定位，恢復到原來的位置，所以下面內容的margin-top也要去掉 111 nav.className = "nav"; // 去掉固定定位的樣式，保留之前的樣式 112 content.style.marginTop = 0; 113 } 114 }; 115 116 117 </script>
js實現導航固定定位