基於scroll的吸頂效果
阿新 • • 發佈：2018-09-17
初始 str 下載 瀏覽器 基礎上 function 9.png har 準備
本次要實現的是一種常見的網頁效果，如下：
頁面由頭部，導航，主體內容三部分組成，當頁面發生滾動時，頭部逐漸隱藏，導航部分向上移動，直到導航部分距離瀏覽器頂部為零時，導航部分固定不動，保持吸頂效果，如下所示：
我們分三步實現上面的效果。
首先是頁面的基礎結構，為了簡化操作，將頭部、導航部分和主體內容部分全部用圖片表示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>*{ margin: 0; padding: 0; list-style: none; border:none } img{ vertical-align: top; width: 100%; } section{ width: 70%; margin: 0 auto; } </style> </head> <body> <header id="head"> <img src="images/top.png" alt=""> </header> <nav id="nav"> <img src="images/nav.png" alt=""> </nav> <section> <img src="images/body01.png" alt=""> <img src="images/body02.png"alt=""> </section> </body> </html>
此時，一個基本的頁面效果已經出來了，我們再來做一個提前準備，就是監聽滾動事件，所以需要用到上一篇所封裝的方法和之前用的根據id獲取元素方法：
<script> function scroll() { if(window.pageYOffset !== null){ return { top: window.pageYOffset, left: window.pageXOffset } }else if(document.compatMode === "CSS1Compat"){ // W3C return { top: document.documentElement.scrollTop, left: document.documentElement.scrollLeft } }else{ return { top: document.body.scrollTop, left: document.body.scrollLeft } } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; }</script>
至此，所有的準備都完成了，我們再來分析理想的效果：當瀏覽器發生滾動時，頁面向上卷起，直到頂部完全卷起，即瀏覽器的卷起部分等於導航部分最初距離頂部邊緣的距離，此時，吸頂的部分即導航部分位於瀏覽器頂部，繼續滾動時，主體部分發生了滾動，但導航部分的位置不再發生變化：
1，找到臨界位置，卷起高度==初始化時導航部分距離瀏覽器頂部的高度
2，賦予導航部分吸頂效果：position：fixed
3，卷起高度變大時，繼續吸頂，卷起高度變小時，取消吸頂
根據上面的分析，我們前面的基礎上繼續完善代碼：
<style> .nav{ position: fixed; left: 0; top:0; width: 100%; } </style> <script> window.onload = function () { // 1. 求出offsetHeight var nav_top_height = $("nav").offsetTop; // 2. 監聽窗口滾動 window.onscroll = function () { var scroll_top_height = scroll().top; console.log(scroll_top_height); // 2.1 判斷 if(scroll_top_height >= nav_top_height){ $("nav").className = "nav"; }else { $("nav").className = ""; } } } </script>
這樣，簡易的吸頂效果就實現了，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; border:none } img{ vertical-align: top; width: 100%; } section{ width: 70%; margin: 0 auto; } .nav{ position: fixed; left: 0; top:0; width: 100%; } </style> </head> <body> <header id="head"> <img src="images/top.png" alt=""> </header> <nav id="nav"> <img src="images/nav.png" alt=""> </nav> <section> <img src="images/body01.png" alt=""> <img src="images/body02.png" alt=""> </section> <script> function scroll() { if(window.pageYOffset !== null){ return { top: window.pageYOffset, left: window.pageXOffset } }else if(document.compatMode === "CSS1Compat"){ // W3C return { top: document.documentElement.scrollTop, left: document.documentElement.scrollLeft } }else{ return { top: document.body.scrollTop, left: document.body.scrollLeft } } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } window.onload = function () { // 1. 求出offsetHeight var nav_top_height = $("nav").offsetTop; // 2. 監聽窗口滾動 window.onscroll = function () { var scroll_top_height = scroll().top; console.log(scroll_top_height); // 2.1 判斷 if(scroll_top_height >= nav_top_height){ $("nav").className = "nav"; }else { $("nav").className = ""; } } } </script> </body> </html>
完整詳細代碼下載：點這裏
基於scroll的吸頂效果