基于jQuery实现页面滚动时顶部导航显示隐藏效果

时间：2022-09-09 07:39:56
<!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. &lbrack;jquery&rsqb;判断页面滚动到顶部和底部（适用于手机web加载）

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

  3. 使用 jQuery&period;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&period;js – 在页面滚动时展现动感的元素动画效果

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

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

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

随机推荐

  1. 【代码笔记】iOS-自定义弹出框

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...

  2. &period;net 4&period;0 ValidateRequest&equals;&quot&semi;false&quot&semi; 无效

    昨天安装了VisualStudio 2010 Ultimate,今天把最近的一个项目升级到了4.0下,结果跑了一下,发现关于页面启用 ValidateRequest="false" ...

  3. jsp&sol;servlet 中sendRedirect&comma;include&comma;forward区别

    1 sendRedirect response.sendRedirect(); 服务器根据逻辑,发送一个状态码,告诉浏览器重新去请求新的地址,一般来说浏览器会用刚才请求的所有参数重新请求,所以sess ...

  4. SharePoint 2013 图像呈现形式介绍

    由于图像呈现形式依赖 SharePoint Server 2013 中的其他功能,因此需确保您满足本节中的先决条件,才能执行本文中的过程.先决条件包括: • 发布网站集 您要在其中添加图像呈现形式的网 ...

  5. 怎样使用Photoshop CS5的操控变形功能

    | 浏览:23114 | 更新:2011-08-08 10:10 | 标签: photoshop 1 2 3 4 5 6 7 分步阅读 Photoshop CS5已经发布很长时间了,和以前的版本相比, ...

  6. 在每次request请求时变化session

    session.invalidate();//使得当前的session失效 request.getSession(true).getId();//生成一个新的session 原理: request.g ...

  7. &lbrack;BZOJ1207&rsqb; &lbrack;HNOI2004&rsqb; 打鼹鼠 &lpar;dp&rpar;

    Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探 ...

  8. Tensorflow使用Cmake在Windows下生成VisualStudio工程并编译

    传送门: https://github.com/tensorflow/tensorflow/tree/r0.12/tensorflow/contrib/cmake http://www.udpwork ...

  9. css 蒙层

    蒙层 利用z-index: .mui-backdrop-other { position: fixed; top: 44px; right:; bottom:; left:; z-index:; ba ...

  10. linux的python版本升级

    可利用Linux自带下载工具wget下载,如下所示:     # wget http://www.python.org/ftp/python/2.7.3/Python-2.7.13.tgz 下载完成后 ...

相关文章