模拟百度导航栏滚动监听

代码如下：

<!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. vue中computed和watch

    computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 1.函数形式 computed:{ listenArr(){ ...

  2. vmware+centos

    centos 7 在安装的时候使用 net.ifname=0 biosdevname=0 使网卡名和以前一样 /boot 引导系统启动,内核 /swap 交换分区,临时作为内存使用防止内存不够使用导致 ...

  3. 对空间数据（Shape）重新排序

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

  4. js对象，字符串 互相 转换

     JSON.stringify(jsonobj);    //可以将json对象转换成json字符串 反过来: JSON.parse(jsonstr);     //可以将json字符串转换成json ...

  5. Android MediaPlayer播放raw资源封装类

    import android.content.Context; import android.media.MediaPlayer; import xxxx.R; public class MediaU ...

  6. Android SVN上传项目

    方式一: 1 工具栏 VCS ——import into Version Control - Share Project (SubVersion)(注意不要用import into SubVersio ...

  7. Java8新特性_日期时间新类 LocalDate、LocalTime、LocalDateTime

    import java.text.SimpleDateFormat; import java.time.LocalDate; import java.time.format.DateTimeForma ...

  8. 堆栈Stack介绍

    堆栈(Stack)代表了一个后进先出的对象集合.当您需要对各项进行后进先出的访问时,则使用堆栈.当您在列表中添加一项,称为推入元素,当您从列表中移除一项时,称为弹出元素. Stack 类的方法和属性 ...

  9. ue4 Skeletal Mesh编辑器

    skeletal mesh:骨骼网络物体资源 由 美术制作(*.fbx). 在ue4可对此资源进行编辑以添加一些游戏需要的设置. https://docs.unrealengine.com/lates ...

  10. [ASP.net教程]IIS服务器 远程发布（Web Deploy）配置

    asp.net 网站有三种常用的发布方式:分别是拷贝开发机上发布好的文件到服务器硬盘上.打包成安装程序到服务器上安装.通过Visual Studio 开发平台远程发布到服务器. 在asp.net网站的 ...