模拟百度导航栏滚动监听

代码如下：

<!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. 对空间数据（Shape）重新排序

    打开ArcToolBox,数据管理工具->常规(General)->排序

  2. 数据建模工具系列 之 让SQL Power Architect支持Vertica

    几款数据建模软件评估 下面是流行几款数据建模软件: 软件 特点 支持Vertica? 免费? ERWin 功能强大, 操作较繁琐 不支持Vertica 商业软件,价格高 Power Designer ...

  3. faster rcnn 做识别

    faster rcnn 主要分为四个部分: 1. convolutional part: 特征提取 可以使用vgg,resnet 等等 2.region proposal network: 生成 re ...

  4. python 爬虫得到网页的图片

    import urllib.request,os import re # 获取html 中的内容 def getHtml(url): page=urllib.request.urlopen(url) ...

  5. MFC中psz_data无法读取内存的错误

    1.项目 ->属性->C/C++ -->预编译头文件,改为“不适用预编译头” 出现ATL::CSimplestring错误,psz_data无法读取内存 2.修改如下:鼠标右击 项目 ...

  6. QIM量化

    基于量化思想的水印嵌入模型的主要目的是为了实现盲检测.其主要思想是根据水印信息的不同将原始载体数据量化到不同的量化区间,而检测时根据所属的量化区间来识别水印信息.常见的两种量化方式是QIM和SCS方法 ...

  7. Java Web之JSTL标准标签库总结

    [文档整理系列] Java Web之JSTL标准标签库总结

  8. [C++]动态规划系列之Warshall算法

    /** * * @author Zen Johnny * @date 2018年3月31日 下午8:13:09 * */ package freeTest; /* [动态规划系列:Warshall算法 ...

  9. 导弹拦截 dp

    n∗lognn*lognn∗logn写法,lis[i]的意义为:所有最长上升子序列长度为i的位置上的最小a数组元素值lis[i]的意义为:所有最长上升子序列长度为i的位置上的最小a数组元素值lis[i ...

  10. Yii2 restful api创建，认证授权以及速率控制

    Yii2 restful api创建,认证授权以及速率控制 下面是对restful从创建到速率控制的一个详细流程介绍,里面的步骤以及截图尽可能详细,熟悉restful的盆友可能觉得过于繁琐,新手不妨耐 ...