<!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. springboot启动过程

    使用了很长时间的springboot了,一直都知道它简单易用,简化了框架的搭建过程,但是还是不知道它是如何启动的,今天就跟着springboot的源码,去探探这其中的奥妙 以下是spring应用的启动 ...

  2. day1-字符串、列表

    字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...

  3. 提高Modelsim仿真速度的方法(1) -- force

    假如主驱动时钟频率很高,因为要一个周期输出,仿真时间过长,仿真速度慢是自然. 但是仿真中,并不是每个驱动周期都是必要的,这时可以使用force命令把想要的信号提前制造出来. 事实上,对于使用到PLL的 ...

  4. npm 安装vue 报错Failed at the chromedriver@2.34.0 install script 'node install.js'

    提示版本不够,后来百度到,在你的vue项目包下执行: npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/ ...

  5. 基于OneMap的水利行业共享服务平台搭建步骤

    今天上午再次学习Esri技术培训中心的“GIS服务共享与运维管理——之OneMap解决方案”课程,从中学习了OneMap的产品架构以及基于OneMap共享服务平台的搭建步骤.下面把其中水利行业的共享服 ...

  6. 北京服务业占GDP比重达81.7%

    北京服务业占GDP比重达81.7% 2017-05-17 19:46:00 来源: 中国新闻网(北京)举报   0 易信 微信 QQ空间 微博 更多 (原标题:北京服务业占GDP比重达81.7%)   ...

  7. centos7 安装 python3

    sudo yum -y groupinstall "Development tools" sudo yum -y install zlib-devel bzip2-devel op ...

  8. java代码优化写法（转摘）

    本文源地址:https://blog.csdn.net/syc001/article/details/72841650 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序 ...

  9. Servlet与Struts的区别

    启动: ● Servlet:无 ● Struts:配置filter,设置struts入口 创建: ● Servlet:继承HttpServlet,重写doGet与doPost方法: 添加注解或配置we ...

  10. Python2.7安装matplotlib、numpy

    Windows版本 一.从官网下载python2.7,安装过程中把pip给装上,并且把path也选上,就是把自带的工具全选: 二.在cmd下输入python,会进入交互式界面,出了问题很大程度上是因为 ...