模拟百度导航栏滚动监听

代码如下：

<!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>

前端 ---- js 模拟百度导航栏滚动案例的更多相关文章

  1. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  3. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  4. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  5. 用sticky.js实现头部导航栏固定

    在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...

  6. 【前端】javascript实现导航栏筋斗云效果特效

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

  7. JS如何实现导航栏的智能浮动

    <script language="javascript">     function smartFloat(obj) {         var obj = docu ...

  8. 用JS实现任意导航栏的调用

    首先设计一个关于导航的层叠样式表如:body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;backgro ...

  9. Vue.js模拟百度下拉框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 062、如何使用flannel host-gw backend（2019-04-02 周二）

    参考https://www.cnblogs.com/CloudMan6/p/7457653.html   flannel 支持多种backend,前面学习的是 vxlan backend ,host- ...

  2. javascript&&jquery编写插件模板

    javascrpt插件编写模板 这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理 ;(function(window,document){ function FnName ...

  3. tomcat下的Cookie特殊符号问题

    案例:在项目中通过Cookie方式临时存放检索条件,不小心在Cookie值中使用了特殊符号"@",导致在服务器端无法正确解析Cookie值.之所以说"不小心", ...

  4. VS2017 新建win32控制台应用

    VS2017的Win32应用比较隐蔽添加新项目,选择项目向导,点击下一步即可看到.

  5. Hibernate使用套路,新手请进

    package cn.zhaoqinrong.MainApp; import org.apache.log4j.Logger; import org.hibernate.HibernateExcept ...

  6. Python安全 - 从SSRF到命令执行惨案

    前两天遇到的一个问题,起源是在某个数据包里看到url=这个关键字,当时第一想到会不会有SSRF漏洞. 以前乌云上有很多从SSRF打到内网并执行命令的案例,比如有通过SSRF+S2-016漏洞漫游内网的 ...

  7. 梯度下降算法对比（批量下降/随机下降/mini-batch）

    大规模机器学习: 线性回归的梯度下降算法:Batch gradient descent(每次更新使用全部的训练样本) 批量梯度下降算法(Batch gradient descent): 每计算一次梯度 ...

  8. Hive通过mysql元数据表删除分区

    1 创建表 hive命令行操作 CREATE TABLE IF NOT EXISTS emp( name STRING, salary FLOAT, subordinates ARRAY<STR ...

  9. 自制rpm包

    参考自:https://blog.csdn.net/u010384744/article/details/80929319 https://blog.csdn.net/samxx8/article/d ...

  10. mysql 查询优化 ~ 优化基础补充

    一 简介:此文章是对于 sql通用基础的补充说明 二 虚拟列: mysql虚拟列是mysql5.7的新特性,对于函数计算形成的结果可作为虚拟列,并可以对虚拟列添加索引,这样就能加速sql的运行,不过有 ...