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

本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

引入核心文件

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

构建html,margint这个div中为了出现滚动条而建,并无实际作用。

<div class="top-title">这是顶部导航条</div>
<div class="margint"><p>滚动看效果</p><p>滚动看效果</p></div>

写入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;}

top-title中定义了transition: top .5s;是指.5S时间内动画展示top方向数值的改为。如添加hidden类后,top-title会在0.5s内从top的0动画缓冲到-90PX。
写入JS

$(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');
    }        

   });
});

以上就是基于jquery实现页面滚动时顶部导航显示隐藏的总体构思,希望大家沿着这个思路完成导航显示隐藏的效果,谢谢大家阅读。

时间: 2015-11-24

jQuery实现背景弹性滚动的导航效果

本文实例讲述了jQuery实现背景弹性滚动的导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

jquery实现的一个导航滚动效果具体代码

在做校园网视频网站的时候,首页有一个导航页面要实现滚动效果,有样例,但代码是在难弄懂,貌似网页设计这块还是只有自己的代码自己懂,索性就仿造别人的效果自己做了一个,大体上还行,看起来还是比较流畅的,不次于原作的幺. 现在先把代码拷贝到这里,以后再逐一简化修改: 实现滚动效果,脚本代码如下: 复制代码 代码如下: var all=0; var no=0; var s_width=0; $(document).ready(function(){ all=$('.slide').length; s_wi

jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】

本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE

jQuery实现的粘性滚动导航栏效果实例【附源码下载】

本文实例讲述了jQuery实现的粘性滚动导航栏效果.分享给大家供大家参考,具体如下: 粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单会固定在顶部:当点击菜单时,页面会平滑的滚动到对应的区域. 兼容性 由于 smint 使用了 position: fixed,所以它不兼容 IE6.适用浏览器:IE8.360.FireFox.Chrome.Safa

jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

  复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

jQuery实现带滚动线条导航效果的方法

本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

jquery编写Tab选项卡滚动导航切换特效

本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=

基于jquery固定于顶部的导航响应浏览器滚动条事件

今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 源码下载 实现的代码: html代码: <div id="page"> <div id="toolbar" data-0="height:192px" data-128="height: 64px"> <div id="a

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

ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素. http://webpop.github.io/jquery.pin/ 添加脚本 向页面中添加脚本,使用 jquery.pin 来固定导航.为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到. 1. 布局组件 -> 默认

jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

jQuery滚动监听实现商城楼梯式导航效果

话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu

jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

jQuery插件fullPage.js实现全屏滚动效果

本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示  的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue

基于jquery实现全屏滚动效果

那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用.功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放.旋转以产生各种各样的动画效果.同时它还支持 fullPage.js 所没有的水平滚动. 兼容桌面端(ie5.5+) 和 手机端 你可以用它来构建你的个人主页或者网页应用 这是一个不使用jQuery小巧的框架 不到9KB 再介绍之前先看一

fullPage.js和CSS3实现全屏滚动效果

首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件.首先先展示一下基本的效果图. 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换. 第一屏是用一个图片,其他的三屏都是由左侧的三个图片和右侧的两个图片组成的. 这三屏左侧的图片展开方式不同,所以就更有炫酷的效果. 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置. 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置.

vue实现全屏滚动效果(非fullpage.js)

本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下 是什么 网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起.当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面. 此次只实现鼠标滚动 实现原理 使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽) 代码实现 HTML <template> <div class=&qu

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html

jquery实现全屏滚动

在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1.js动态获取屏幕的高度. 获取屏幕的高度,设置每一屏幕的高度. 2.监听mousewheel事件. 监听mousewheel事件,并判断滚轮的方向,向上或向下滚动一屏. 二.jQuery插件fullpages介绍 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平

jQuery实现带渐显效果的人物多级关系图代码

本文实例讲述了jQuery实现带渐显效果的人物多级关系图.分享给大家供大家参考.具体如下: 这里演示jQuery实现带渐显效果的人物多级关系图,setQuestPose:function中的n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度,测试时请注意,如果右下角提示有错误,请重新刷新页面即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-gxt-style-d

jQuery实现下滑菜单导航效果代码

本文实例讲述了jQuery实现下滑菜单导航效果代码.分享给大家供大家参考.具体如下: 这里演示jquery向下滑的导航菜单代码,黄色风格下滑菜单,可作为网站的主导航菜单,二级菜单向下滑出,兼容性也是很不错的,本菜单来源自网络,丢失原作者署名信息,请原作者看到后与我们联系署名. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html

jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层.分享给大家供大家参考,具体如下: 首先先附上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml: