17-----案例

模拟百度导航栏滚动监听

 

复制代码
<!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>
复制代码

 

posted @   王竹笙  阅读(173)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
点击右上角即可分享
微信分享提示
SQL AI 助手