<!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. Codeforces Parking Lot

    http://codeforces.com/problemset/problem/630/I 简单的排列组合,推式子技巧:举一个小样例,看着推,别抽象着推,容易错 #include <iostr ...

  2. limit方法也是模型类的连贯操作方法之一

    limit方法也是模型类的连贯操作方法之一,主要用于指定查询和操作的数量,特别在分页查询的时候使用较多.ThinkPHP的limit方法可以兼容所有的数据库驱动类的. 限制结果数量 例如获取满足要求的 ...

  3. ros python

    https://www.ncnynl.com/archives/201611/1059.html python的节点需要对节点设置权限为可执行,在.py文件所在的路径执行如下命令 $ touch ta ...

  4. LUOGU P4281 [AHOI2008]紧急集合 / 聚会 (lca)

    传送门 解题思路 可以通过手玩或打表发现,其实要选的点一定是他们三个两两配对后其中一对的$lca$上,那么就直接算出来所有的$lca$,比较大小就行了. #include<iostream> ...

  5. 博弈论 | 暑期集训Day2学习总结

    今天的知识点为博弈论. 相比于昨天完全陌生难懂的概念,今天接触到的东西应该算是非常容易理解了,一下子又对ACM的学习重拾信心.毕竟game作为主题也吸引眼球,每种博弈背景下引入的游戏介绍也十分有趣.主 ...

  6. Elasticsearch & Kibana with Shield

    Elasticsearch & Kibana with Shield   官方网站: https://www.elastic.co/guide/en/kibana/current/produc ...

  7. Spring Boot 集成Jsp与生产环境部署

    一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...

  8. 使用由 Python 编写的 lxml 实现高性能 XML 解析

    lxml 简介 Python 从来不出现 XML 库短缺的情况.从 2.0 版本开始,它就附带了 xml.dom.minidom 和相关的 pulldom 以及 Simple API for XML ...

  9. 微信小程序——页面滑动事件

    wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchs ...

  10. 微信小程序——页面跳转传值

    比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator ...