zoukankan      html  css  js  c++  java
  • 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听

    代码如下:

    复制代码
    <!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>
  • 相关阅读:
    RealView MDK在链接时提示空间不够的解决方案总结
    不同的LCD之间程序移植时配置参考
    S3c2440ALCD控制器配置实例
    mini2440裸机之PWM
    对增益大于等于10时保持稳定的放大器进行补偿以在较低增益下工作
    ASP.NET HttpContext的时间戳属性
    C#验证邮箱,电话,手机,数字,英文,日期,身份证,邮编,网址,IP类.. (转)
    sqlhelper 实现回滚事务
    JQuery全选和反选
    js 获取前天、昨天、今天、明天、后天的时间 (转)
  • 原文地址:https://www.cnblogs.com/liuafan/p/9523937.html
Copyright © 2011-2022 走看看