<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="">

    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/common.css">

    <style type="text/css">

        .top-title {

            background:#e74c3c;

            color:white;

            font-size:24px;

            padding:5px;

            text-align:center;

            position: fixed;

            left:0;

            top:0;

            width:100%;

            transition: top .5s;

        }

        .hiddened {

            top: -90px;

        }

        .showed {

            top:0;

            z-index: 9999;

        }

        .margint {

            height: 1500px;

            background-color: red;

        }

</style>

</head>

<body>

<div class="top-title">这是顶部导航条</div>

<div class="margint">

    <p>滚动看效果</p>

    <p>滚动看效果</p>

    <p>滚动看效果</p>

</div>

<script src="../js/jquery.min.js"></script>

<script type="text/javascript">

    $(function(){

        var winHeight = $(document).scrollTop();

        $(window).scroll(function() {

        var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少

        if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则删除隐藏类

        $('.top-title').addClass('hiddened');

    }else {

        $('.top-title').removeClass('hiddened');

    }

    if (scrollY > winHeight){ //如果没滚动到顶部，删除显示类，否则添加显示类

        $('.top-title').removeClass('showed');

    }

    else {

        $('.top-title').addClass('showed');

    }

   });

});

</script>

</body>

</html>

　　

基于jQuery实现页面滚动时顶部导航显示隐藏效果的更多相关文章

  1. jQuery实现页面滚动时顶部动态显示隐藏

    http://www.jqcool.net/jquery-scroll.html 另外headroom.js也行:http://www.bootcss.com/p/headroom.js/

  2. [jquery]判断页面滚动到顶部和底部（适用于手机web加载）

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  3. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  4. 一款基于jquery滑动后固定于顶部的导航

    之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...

  5. Javascript实现页面滚动时导航智能定位

    遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...

  6. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  7. 【jQuery】scroll 滚动到顶部

    Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...

  8. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  9. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

随机推荐

  1. js怎样截取字符串后几位以及截取字符串前几位

    想要截取字符串前几位与后几位,主要代码如下 截取字符串前几位 var disName ='开心一族漂亮家园'; var shortName = disName.substring(0,5); cons ...

  2. 前缀后缀——cf1167E

    想了很久没弄明白,对于边界的情况还是有问题 等题解出了再看看 然后枚举每个后缀r,找到比它小,并且在其左边的前缀l,那么删<=l,r-1的都可以 最后的二分很迷:要多考虑特殊情况:前缀跑到后缀后 ...

  3. 集合划分——cf1028D思维题

    非常思维的一道题目,题意很长 给定s1,s2两个集合,s1维护最大值,s2维护最小值,s1的所有元素要比s2小 操作1:往两个集合里的任意一个添加x 操作2:把x从所在的集合里删掉:要求被删的x必须是 ...

  4. 深入浅出 Java Concurrency (26): 并发容器 part 11 Exchanger[转]

    可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹配,并且在返回时接收其伙伴的对象.Exchanger 可能被视为 Synchro ...

  5. 我能不能理解成 ssh中service就相当于与jsp+servlet+dao中的servlet？？？

    转文 首先解释面上意思,service是业务层,dao是数据访问层.(Data Access Objects) 数据访问对象 1.Dao其实一般没有这个类,这一般是指java中MVC架构中的model ...

  6. SPSS分析过程可自动化,你知道吗

    SPSS分析过程可自动化,你知道吗 在使用SPSS的过程中,有时候会遇到重复进行相同分析操作的情况,或者分析过程很复杂的情况. 这时候我们多么希望SPSS能够记住上一次的分析步骤,不要让我们重复的去点 ...

  7. python3-常用模块之openpyxl(1)

    1.创建工作簿 from openpyxl import Workbook # 创建excel对象 wb = Workbook() # 获取第一个sheet = wb.active # 单元格写入内容 ...

  8. Ubuntu中使用Nginx+rtmp搭建流媒体直播服务

    一.背景 本篇文章是继上一篇文章<Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务>文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器, ...

  9. js 实现音频播放与暂停

    html: <script src="js/jquery-2.1.3.min.js"></script> <div id="soundIco ...

  10. HBase Ganglia