• 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{
                 100%;
                height: 70px;
                background-color: black;
                /*display: none;*/
            }
            .w{
                 1210px;
                overflow: hidden;
                margin: 0 auto;
            }
            .header ul li{
                float: left;
                 242px;
                height: 70px;
                line-height: 70px;
                text-align: center;
                background-color: blue;
    
            }
            .header ul li a{
                display: block;
                 242px;
                height: 70px;
                color: #fff;
            }
    
            /*固定导航栏*/
            .header-fix{
                 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;
                 117px;
                height: 57px;
                padding-top: 23px;
            }
            .header-fix .fm{
                float: left;
                 700px;
                height: 80px;
                margin-left: 100px;
            }
            .fm input[type='text']{
                float: left;
                 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;
                 100px;
                height: 52px;
                background-color: #38f;
                position: relative;
                top: 15px;
                color: #fff;
                line-height: 52px;
                font-size: 18px;
            }
            .box1{
                 100%;
                height: 200px;
                background-color: red;
            }
            .box2{
                 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>
  • 相关阅读:
    初识你Swift【上篇】
    初识你Swift【下篇】
    单元测试基础
    时间都去哪了?
    iOS App上线的秘密
    mysql系列——DQL常见操作汇总(四)
    Get和Post请求有什么区别?
    SpringBoot2+WebSocket之聊天应用实战
    OCR识别
    mysql系列——子查询(非常重要)(八)
  • 原文地址:https://www.cnblogs.com/liuye1990/p/9550902.html
Copyright © 2020-2023  润新知