一款基于jquery滑动后固定于顶部的导航
2014-09-26 00:00
567 查看
之前已为大家介绍了好多css3实现的导航菜单。今天分享一款基于jquery滑动后固定于顶部的导航。这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
css代码:
js代码:
注:本文爱编程原创文章,转载请注明原文地址:/article/1211827.html
在线预览 源码下载
实现的代码。
html代码:
<h1> Scroll down</h1> <h2> And watch the menu bar</h2> <nav id="menu"> <h1 id="sitename"> MySite</h1> <ul> <li class="active"><a href="http://www.w2bc.com">Home</a></li> <li><a href="http://www.w2bc.com">Blog</a></li> <li><a href="http://www.w2bc.com">About</a></li> <li><a href="http://www.w2bc.com">Contact</a></li> </ul> </nav>
css代码:
body { height: 2000px; font-family: Roboto, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2 { text-align: center; } h1 { color: #222; } h2 { color: #555; } nav#menu { margin-top: 50px; background: #3498db; text-align: center; height: 50px; width: 100%; } nav#menu ul { padding: 0; background: white; margin: 0 auto; display: inline-block; height: 50px; } nav#menu ul li { float: left; padding: 0 20px; background: #3498db; list-style: none; margin-right: 5px; line-height: 50px; height: 50px; /* * This element will get an alternative style * once we apply the "scrolled" class. * We also want a nice animation so we can * simply set CSS3 transitions for this. */ transition: margin 0.1s ease-in-out; } nav#menu ul li:nth-child(1) { margin-left: 5px; } nav#menu ul li.active { background: #2980b9; } nav#menu ul li a { color: white; text-decoration: none; font-size: 1.3em; } nav#menu h1#sitename { font-size: 1.2em; line-height: 50px; margin: 0; position: absolute; left: 0.5em; color: white; opacity: 0; /* * Same thing here as with the menu items. * This element will be animated into its * alt. state with the transition property */ transition: opacity 0.1s ease-in-out; } /********************************************* * Once the 'scrolled' class is toggled * we can set any alternative styling that we * want for the menu bar *********************************************/ nav#menu.scrolled { margin: 0; position: fixed; top: 0; } nav#menu.scrolled ul li { margin: 0; } nav#menu.scrolled h1#sitename { opacity: 1; }
js代码:
var menu = $('nav#menu'); var watcher = scrollMonitor.create(menu); watcher.lock(); watcher.stateChange(function () { $(menu).toggleClass('scrolled', this.isAboveViewport) }); //@ sourceURL=pen.js
注:本文爱编程原创文章,转载请注明原文地址:/article/1211827.html
相关文章推荐
- 一款基于jquery滑动后固定于顶部的导航
- 一款基于jquery固定于顶部的导航
- 一款基于jquery固定于顶部的导航
- 基于jquery固定于顶部的导航响应浏览器滚动条事件
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的响应式二级导航菜单
- jQuery 顶部导航跟随滚动,固定浮动在顶部
- jquery实现导航固定顶部的效果仿蘑菇街
- 一款基于jQuery打造的大屏带导航焦点图特效
- 一款基于jQuery的仿百度首页滑动选项卡
- jquery导航滚动固定在顶部
- 一款基于jquery的侧边栏导航
- jquery实现固定顶部导航效果(仿蘑菇街)
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jQuery仿淘宝红色分类导航
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 一款基于jQuery+CSS的动态滑动菜单特效代码
- 一款基于jquery打造的鼠标响应式顶部弹出窗口特效
- jQuery页面内滑动到锚点导航效果,回到顶部