基於scroll的吸頂效果

時間 2019-11-24

標籤基於 scroll 效果简体版

原文原文鏈接

本次要實現的是一種常見的網頁效果，以下：html

頁面由頭部，導航，主體內容三部分組成，當頁面發生滾動時，頭部逐漸隱藏，導航部分向上移動，直到導航部分距離瀏覽器頂部爲零時，導航部分固定不動，保持吸頂效果，以下所示：瀏覽器

咱們分三步實現上面的效果。spa

首先是頁面的基礎結構，爲了簡化操做，將頭部、導航部分和主體內容部分所有用圖片表示。3d

<!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獲取元素方法：code

<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>

至此，全部的準備都完成了，咱們再來分析理想的效果：當瀏覽器發生滾動時，頁面向上捲起，直到頂部徹底捲起，即瀏覽器的捲起部分等於導航部分最初距離頂部邊緣的距離，此時，吸頂的部分即導航部分位於瀏覽器頂部，繼續滾動時，主體部分發生了滾動，但導航部分的位置再也不發生變化：htm

1，找到臨界位置，捲起高度==初始化時導航部分距離瀏覽器頂部的高度blog

2，賦予導航部分吸頂效果：position：fixed事件

3，捲起高度變大時，繼續吸頂，捲起高度變小時，取消吸頂圖片

根據上面的分析，咱們前面的基礎上繼續完善代碼：ip

<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>

完整詳細代碼下載：點這裏

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。