模拟百度导航栏滚动监听

代码如下：

<!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. Spring boot中使用Mongodb

    安装 使用Idea新建Spring boot工程时需要选择Mongodb 或者在工程中加入依赖 Maven: <dependency> <groupId>org.springf ...

  2. URLSearchParams 接口

    URLSearchParams 接口定义了很多个用来处理 URL 参数串的方法 他可以把对象转变成url上面查询信息的写法,例如a=1&b=2 可以把请求路由中的字符串   key=1 ,拼接 ...

  3. [Android] Android利用Coordinatorlayout+AppbarLayout实现折叠式布局

    折叠式布局在App中相当常见,给人一种科技感,充满良好的用户体验. 本文就以两个简单的例子,来举例说明基本折叠式布局: 首先需要在app/build.gradle下添加如下依赖: compile 'c ...

  4. 基于DSP的IS95正向业务信道模块设计

    **定时20ms循环处理话音数据包*** *伪指令不占空间不影响执行速度,只是定义和描述但对汇编链接有重要指示作用 ********************************* .title & ...

  5. 十二、文件和目录——Linux文件系统结构

    12.1 Linux文件系统结构 12.1.1 文件操作基本元素 文件操作相关的最基本元素是:目录结构,索引节点和文件的数据本身 目录结构(目录项) 索引节点(i 节点) 文件的数据 12.1.2 文 ...

  6. 如何使用xss带cookie

    参考连接:https://pentesterlab.com/exercises/xss_and_mysql_file/course 打开测试网站: 然后在192.168.1.46机器上使用socat, ...

  7. poj2559/hdu1506 单调栈经典题

    我实在是太菜了啊啊啊啊啊 到现在连个单调栈都不会啊啊啊 写个经典题 #include<cstdio> #include<algorithm> #include<cstri ...

  8. 本地测试使用Tomcat，生产环境使用GlassFish。

    总结:Tomcat8 = javaee7规范(servlet3.1 + jsp2.3 + el3.0 + websocket1.0) + java7 [配置初始化参数使用jdk8编译]conf/web ...

  9. python DB-API

    python为数据库访问开发了统一的API(Application Programming Interface,应用程序编程接口):DB-API. MySQL的实现叫做MySQLdb,Oracle实现 ...

  10. Debian Security Advisory(Debian安全报告) DSA-4405-1 openjpeg2

    package :openjpeg2 相关CVE ID: CVE-2017-17480 CVE-2018-5785 CVE-2018-6616 CVE-2018-14423 CVE-2018-1808 ...