client , offset , scroll 系列及百度導航欄案例

時間 2019-11-17

標籤 client offset scroll 系列百度導航案例简体版

原文原文鏈接

1. client 系列

示例 : javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                position: absolute;
                border: 10px solid red;
                /*margin: 10px 0px 0px 0px;*/
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
    </body>
    <script type="text/javascript">
        /*
         *   clientTop 內容區域到邊框頂部的距離 ，說白了，就是邊框的高度
         *      clientLeft 內容區域到邊框左部的距離，說白了就是邊框的亂度
         *      clientWidth 內容區域+左右padding   可視寬度
         *      clientHeight 內容區域+ 上下padding   可視高度
         * */
        
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight)；   
        
    </script>
    
</html>

效果 :css

2 . 屏幕的可視區域

示例 : html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        
        // 屏幕的可視區域
        window.onload = function(){
            
            // document.documentElement 獲取的是html標籤
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
            // 窗口大小發生變化時，會調用此方法
            window.onresize = function(){    
                console.log(document.documentElement.clientWidth);
                console.log(document.documentElement.clientHeight);
            }
            
            
            
        }
    </script>
</html>

效果 : java

3 . offset 系列

示例 : 網站

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
        </style>
        
    </head>
    <body style="height: 2000px">
        <div>
            <div class="wrap" style=" width: 300px;height: 300px;background-color: green">
                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">            
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box')
            /*
             offsetWidth佔位寬  內容+padding+border
             offsetHeight佔位高 
             * offsetTop: 若是盒子沒有設置定位 到body的頂部的距離,若是盒子設置定位，那麼是以父輩爲基準的top值
             * offsetLeft： 若是盒子沒有設置定位 到body的左部的距離，若是盒子設置定位，那麼是以父輩爲基準的left值
             
             * */
            console.log(box.offsetTop)
            console.log(box.offsetLeft)
            console.log(box.offsetWidth)
            console.log(box.offsetHeight)
            
        }
        
    </script>
</html>

效果 : spa

4 . scroll 系列

示例 : code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
    </head>
    <body style="width: 2000px;height: 2000px;">
        <div style="height: 200px;background-color: red;"></div>
        <div style="height: 200px;background-color: green;"></div>
        <div style="height: 200px;background-color: yellow;"></div>
        <div style="height: 200px;background-color: blue;"></div>
        <div style="height: 200px;background-color: gray;"></div>
        <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
            <p>海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王
                海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王
                海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王海賊王
            </p>

        </div>


    </body>
    <script type="text/javascript">

        window.onload = function(){

            //實施監聽滾動事件
            window.onscroll = function(){
//                console.log(1111)
//                console.log('上'+document.documentElement.scrollTop)
//                console.log('左'+document.documentElement.scrollLeft)
//                console.log('寬'+document.documentElement.scrollWidth)
//                console.log('高'+document.documentElement.scrollHeight)


            }

            var s = document.getElementById('scroll');

            s.onscroll = function(){
//            scrollHeight : 內容的高度+padding  不包含邊框
                console.log('上'+s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('寬'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }

    </script>
</html>

5 . 案例 : 模擬百度導航欄滾動監聽

示例 : orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0;
            outline: none;
        }
        body{
            /*padding-top: 80px;*/
        }
        .header{
            width: 100%;
            height: 70px;
            background-color: black;
            /*display: none;*/
        }
        .w{
            width: 1210px;
            overflow: hidden;
            margin: 0 auto;
        }
        .header ul li{
            float: left;
            width: 242px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background-color: blue;

        }
        .header ul li a{
            display: block;
            width: 242px;
            height: 70px;
            color: #fff;
        }

        /*固定導航欄*/
        .header-fix{
            width: 100%;
            height: 80px;
            background-color: white;
            box-shadow: 0 0 5px #888;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
            /*margin-bottom: 10px;*/
        }
        .header-fix .logo{
            float: left;
            width: 117px;
            height: 57px;
            padding-top: 23px;
        }
        .header-fix .fm{
            float: left;
            width: 700px;
            height: 80px;
            margin-left: 100px;
        }
        .fm input[type='text']{
            float: left;
            width: 578px;
            height: 50px;
            border-top: 1px solid #999;
            border-left: 1px solid #999;
            border-bottom: 1px solid #999;
            margin-top: 15px;
            padding-left: 20px;
            font-size: 20px;
        }
        .fm input[type='submit']{
            float: left;
            width: 100px;
            height: 52px;
            background-color: #38f;
            position: relative;
            top: 15px;
            color: #fff;
            line-height: 52px;
            font-size: 18px;
        }
        .box1{
            width: 100%;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 100%;
            height: 300px;
            background-color: green;
        }

    </style>
</head>
<body style="height: 2000px">
    <div class="header">
        <div class="w">
            <ul>
                <li><a href="#">網站導航</a></li>
                <li><a href="#">網站導航</a></li>
                <li><a href="#">網站導航</a></li>
                <li><a href="#">網站導航</a></li>
                <li><a href="#">網站導航</a></li>
            </ul>
        </div>
    </div>
    <div class="header-fix">
        <div class="w">
            <div class="logo">
                <img src="./logo_top.png" alt="">
            </div>
            <form class="fm">
                <input type="text" name="">
                <input type="submit" name="" value="百度一下">
            </form>
        </div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>

    <script type="text/javascript">
        window.onload = function(){
            var box2Height = document.getElementsByClassName('box2')[0];
            var fixBox = document.getElementsByClassName('header-fix')[0];
            var headerBox = document.getElementsByClassName('header')[0];

            window.onscroll = function(){
                console.log(box2Height.offsetTop);
                if (document.documentElement.scrollTop >=box2Height.offsetTop) {
                    fixBox.style.display = 'block';
                    document.body.style.paddingTop = '80'+ 'px';
                    headerBox.style.display = 'none';
                }else{
                    fixBox.style.display = 'none';
                    document.body.style.paddingTop = '0'+ 'px';
                    headerBox.style.display = 'block';
                }
            }
        }
    </script>





    
</body>
</html>