jQuery实现滚动自动显示隐藏导航

最新推荐文章于 2020-11-24 18:33:39 发布

dianmian5038

最新推荐文章于 2020-11-24 18:33:39 发布

阅读量223

点赞数

文章标签： javascript 运维 ViewUI

原文链接：http://www.cnblogs.com/abigale/p/4889471.html

版权

jQuery实现滚动自动显示隐藏导航貌似插件挺多了，Headroom.js、基于bootstrap的jquery.bootstrap-autohidingnavbar.js，jBar.js，但似乎也没必要那么麻烦，或者它们确实有其他优势，目前我还不是很清楚。

本文附件下载地址：http://pan.baidu.com/s/1qW7Vuji

正文

1、首先在你的页面引入jQuery.js包

jquery.min.js文件见附件《jquery.min.js》

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

2、创建导航

    <div class="bar">
        <ul class="text">
            <li>cmdb</li>
            <li>业务监控系统</li>
            <li>运维自动化平台</li>
            <li>智能日志分析</li>
            <li>GM游戏运营管理</li>
            <li>知识管理体系</li>
        </ul>
    </div>

3、给导航添加样式

* {margin:0; padding:0;}
.bar{
    width:1000px; 
    height:30px; 
    line-height:30px;
    position:fixed; 
    left:50%; 
    margin-left:-500px; 
    top:0;
    z-index:888; 
    background:#636871; 
}
.text li{
    color: white;
    float: left;
    width: 12%;
}

4、开始js脚本

　　height是算出当前页面距离顶部的长度，再判断当大于100px时就隐藏class名为bar的div，否则就显示它。fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是显示的。

　　讲解下关于jquery的相关知识：1）$(function(){}是jQuery，当问到载入完毕就执行

　　　　　　　　　　　　　　　　2）$(document) 是当前文档，就是你看到的整个网页，$(window) 如果没有框架则就是你浏览的当前浏览器的窗口

    <script type="text/javascript">
        $(function(){
            $(window).scroll(function(){
                height = $(window).scrollTop();
                if(height > 100){
                    $('.bar').fadeIn();
                }else{
                    $('.bar').fadeOut();
                };
            });
        });
    </script>

最后贴上整个文件：也可以在附件中的《demo》直接打开

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function(){
                height = $(window).scrollTop();
                if(height > 100){
                    $('.bar').fadeIn();
                }else{
                    $('.bar').fadeOut();
                };
            });
        });
    </script>



</head>
<body>
    <div class="bar">
        <ul class="text">
            <li>cmdb</li>
            <li>业务监控系统</li>
            <li>运维自动化平台</li>
            <li>智能日志分析</li>
            <li>GM游戏运营管理</li>
            <li>知识管理体系</li>
        </ul>
    </div>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>
    <div>I want to go back to the top.</div><br/>


</body>
</html>

转载于:https://www.cnblogs.com/abigale/p/4889471.html

dianmian5038

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现滚动自动显示隐藏导航

jQuery实现滚动自动显示隐藏导航貌似插件挺多了，Headroom.js、基于bootstrap的jquery.bootstrap-autohidingnavbar.js，jBar.js，但似乎也没必要那么麻烦，或者它们确实有其他优势，目前我还不是很清楚。本文附件下载地址：http://pan.baidu.com/s/1qW7Vuji正文1、首先在你的页面引入jQ...
复制链接

扫一扫