WebApi复习04-DOM(网页特效)_webapi顶部导航固定定位代码-CSDN博客

本文链接：https://blog.csdn.net/m0_64526818/article/details/121985228

本文讲解了如何使用`onscroll`事件结合`client家族`属性实现网页滚动导航的固定与动态切换，以及`setInterval`和`setTimeout`的实战应用，如电商秒杀倒计时和广告弹窗管理。

摘要由CSDN通过智能技术生成

定时器

一段代码在间隔时间重复执行

setInterval永久定时器

一旦开启永远重复执行,只能手动清除

用途: 常用于电商秒杀,获取验证码倒计时

语法:

开启 let timeID = setInterval(function () {}, 间隔时间)

清除 clearInterval(timeID)

setTimeout一次定时器

间隔时间内只执行一次，完毕后自动清除

用途:常用于清除广告弹框

语法:

开启 let timeID = setTimeout(function () {}, 间隔时间)

清除 clearTimeout(timeID)

尺寸

offset家族: 获取'自身'的宽高和位置

offsetWidth|offsetHeight: 自身的真实宽高 = content + padding + border

offsetLeft|offsetTop: 自身的外边框到定位父元素内边距的距离

scroll家族: 获取'内容'的宽高和位置

scrollWidth|scrollHeight: '内容'的宽高,不包含滚动条

scrollLeft|scrollTop: '内容'的位置,滚动条滚动的距离

client家族: 获取'可视区域'的宽高和位置

clientWidth|clientHeight: '可视区域'的宽高,不包含滚动条

clientLeft|clientTop: '可视区域'的位置,左和上边框的宽度

三大家族和样式操作的区别:

(1)获取的都是number类型

(2)只能获取,不能修改

scroll家族：固定导航

1 给网页注册滚动事件: window.onscroll

onscroll: 滚动条事件

2 获取网页滚动距离: HTML的scrollLeft|scrollTop

document.documentElement.scrollLeft|scrollTop

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>

    <div class="top" id="topPart">
        <img id="pic" src="images/top.png" alt="" />
    </div>

    <div class="nav" id="navBar">
        <img src="images/nav.png" alt="" />
    </div>

    <div class="main" id="mainPart">
        <img src="images/main.png" alt="" />
    </div>

    <script>
        /* 
        网页滚动条事件
        如果网页滚动距离 > 顶部栏topPart高度, 设置 导航栏navBar为固定定位
        如果网页滚动距离 < 顶部栏topPart高度, 设置 导航栏navBar为静态定位 (标准流)
         */

        // 获取元素
        let topPart = document.querySelector('#topPart')
        let navBar = document.querySelector('#navBar')
        let mainPart = document.querySelector('#mainPart')

        // 给网页注册滚动条事件
        window.onscroll = function () {
            // 如果网页滚动距离 > 顶部栏topPart高度
            if (document.documentElement.scrollTop >= topPart.offsetHeight) {
                // 设置 导航栏navBar为固定定位
                navBar.style.position = 'fixed'
                navBar.style.top = '0px'

                // 注意:固定定位会脱标,导致后面盒子瞬间顶上去,造成顿闪现象
                // 解决:给下面盒子一个margin撑开脱标的高度
                mainPart.style.marginTop = 10 + navBar.offsetHight + 'px'
            } else {
                // 设置 导航栏navBar为静态定位 (标准流)
                navBar.style.position = 'static'

                // 恢复margin
                mainPart.style.marginTop = 10 + 'px'
            }
        }
    </script>
</body>

</html>

client家族应用场景:响应式布局

(1)给页面注册大小变化事件:window.onresize

(2)获取当前页面的可视区域大小(视口大小): let w = document.documentElement.clientWidth

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        client家族应用场景:响应式布局

        1.响应式布局 ： 一个html同时适配多个不同设备
        2.响应式原理： 根据不同设备尺寸(视口)加载不同的样式
            a.媒体查询
            b.client家族
        3.响应式布局练习
            设备       尺寸          样式
             大PC      >1200px        红 
             小PC      992-1200px     橙 
             平板      768-992px      黄 
             手机      <768px         绿 
        
        client家族实现响应式流程:
        (1)给页面注册大小变化事件:window.onresize
        (2)获取当前页面的可视区域大小(视口大小)
        */

        // (1)给页面注册大小变化事件:window.onresize
        window.onresize = function () {
            // (2)获取当前页面的可视区域大小(视口大小)
            let w = document.documentElement.clientWidth
            let h = document.documentElement.clientHeight
            console.log(w, h)

            if (w >= 1200) {
                document.body.style.backgroundColor = 'red'
            } else if (w >= 992) {
                document.body.style.backgroundColor = 'orange'
            } else if (w >= 768) {
                document.body.style.backgroundColor = 'yellow'
            } else {
                document.body.style.backgroundColor = 'green'
            }

            // 横竖屏适配
            if (w > h) {
                alert('横屏')
            } else {
                alert('竖屏')
            }
        }
    </script>
</body>

</html>