今天分享一款基于jquery滑动后固定于顶部的导航。这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部。效果图如下:
实现的代码。
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
相关推荐
jQuery mobile滑动式的标题导航
jQuery顶部固定导航菜单代码
jQuery响应式顶部固定滑块导航菜单代码,一款粘性滑块导航,点击滑动内容与粘性选项卡导航切换。
jquery右侧边固定层导航菜单依次动画滑动显示菜单展开
jQuery滑动导航条 jQuery滑动导航条网页特效.zip
jQuery固定页面顶部导航菜单基于jquery.1.7.2.min.js制作,置顶导航菜单,随滚动条浮动定位菜单,固定菜单到页面顶部。
插件描述:下拉网页时可使导航栏固定在网页顶端. 参考示例:http://www.jq22.com/jquery-info5130
jquery顶部固定导航下拉菜单是一款基于jquery实现的页面顶部固定导航鼠标悬停显示下拉图标菜单代码。
Jquery仿淘宝顶部导航菜单,模仿淘宝网的顶部导航菜单,效果你懂的!
jquery滑动下拉导航菜单 导航菜单
jquery顶部固定层下拉导航是一款jquery hover页面滚动顶部固定层下拉导航菜单代码。
jquery背景滑动导航菜单代码是一款基于jQuery实现的背景可滑动的导航,鼠标经过导航时导航背景可滑动。
jQuery左侧固定导航栏点击滑动对应页面,一般我们在我们的企业网站或者商城网站都会有在线客服,一般使用qq的形式来展示,或者以网页的形式,一般企业网站在导航栏就会直接显示联系我们!php中文网推荐下载!
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
基于JQUERY的滑动条组件,支持多种浏览器。
jQuery下划线滑动导航菜单,这是一款简洁的jQuery动画菜单,鼠标滑动时会有一条漂亮的线条跟随菜单项滑动,菜单的色彩也十分协调,很美观。
代码效果:jQuery滑动字母特效是一款基于jquery实现的滑动字体特效代码。
jQuery页面内滑动到锚点导航效果,回到顶部
这是一款美观实用的jQuery页面滚动顶部固定tab选项卡切换代码,新闻列表导航选项卡切换插件。
jquery顶部固定层下拉导航 html导航菜单,jquery菜单,html菜单,顶部固定菜单,下拉菜单 博客地址:http://blog.csdn.net/xmtblog/article/details/44750665