<!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. 0902NOIP模拟测试赛后总结

    rank1- rank3- rank4- rank10- rank16- 又考挂了.水平还是不行啊.和天皇差距太大了. 赛时A题的人好多啊.都是大佬.我一个正解都不会打……哭. T1想到dp和拓扑,然 ...

  2. Vue创建项目环境

    目录 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue项目环境搭建 &q ...

  3. PAT甲级——A1078 Hashing

    The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...

  4. hibernate查询timestamp条件

    参考https://blog.csdn.net/zuozuoshenghen/article/details/50540661 Mysql中Timestamp字段的格式为yyyy-MM-dd HH-m ...

  5. 3. 单元测试框架（unittest）1——TestCase

    1. import unittest 引入unittest模块:   2. class SearchTest (unittest.TestCase): 定义一个继承于TestCase类的子类:   3 ...

  6. vue后台管理项目中菜单栏切换的三种方法

    第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

  7. kafka offset manage

    kafka low api:fetch数据从topic partition offset buffsize长度. 提交一般两个维度:时间维度,满多少条提交(0.8X之前是没这参数) 在0.8.2.2版 ...

  8. 转载：Linux 安装Java

    1.到官网下载 jdk-8u131-linux-x64.tar.gz 官网地址:http://www.Oracle.com/technetwork/java/javase/downloads/jdk8 ...

  9. Nginx的几个重要模块

    ngx_http_ssl_module 让Nginx可以支持HTTPS的模块,此模块下的大多数指令都应用在http,server上下文 ①ssl on | off; 是否开启ssl功能 ②ssl_ce ...

  10. SQL中distinct 和 row_number() over() 的区别及用法

    1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...