jQuery置顶导航菜单 随浏览器滚动条浮动定位菜单
今天带大家来实现一个大家经常在网站上看到的导航效果,置顶导航菜单,并随滚动条浮动定位菜单,固定菜单到顶部,就像码云笔记导航菜单效果一样,大家可以滚动试一下。之前我写过一篇类似文章,只不过是菜单没有根据滚动条判断,大家可以看一下《jquery 插件固定导航条在浏览器顶部不随滚动条的下拉而移动》,今天效果实现思路很简单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定。先来介绍一下用到哪些 jQuery CSS 操作方法。
scrollTop() 方法
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。
语法
$(selector).scrollTop(offset)
参数 | 描述 |
---|---|
offset | 可选。规定相对滚动条顶部的偏移,以像素计。 |
提示和注释
注释:该方法对于可见元素和不可见元素均有效。
注释:当用于获取值时,该方法只返回第一个匹配元素的 scroll top offset。
注释:当用于设置值时,该方法设置所有匹配元素的 scroll top offset。
通过例子看一下
HTML 代码:
<div style="border:1px solid black;width:200px;height:100px;overflow:auto"> 码云笔记-前端博客,提供许多前端教程帮助大家学习,记录整理博主日常工作笔记和心得,欢迎大家关注收藏码云笔记( mybj123.com ),本博主会不间断的时常更新干货分享到博客中,希望为大家在解决前端的问题上提供绵薄之力,不求回报,只求结交志同道合的前段朋友。 </div> <button class="btn1">获得 scrollbar top offset</button> <p>试着移动滚动条,然后再次点击按钮。</p>
jQuery 代码:
$(document).ready(function(){ $(".btn1").click(function(){ alert($("div").scrollTop()+" px"); }); });
效果展示:
scrollLeft() 方法
定义和用法
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。
返回水平滚动条位置
返回第一个匹配元素的水平滚动条位置。
语法
$(selector).scrollLeft()
参数 | 描述 |
---|---|
position | 可选。规定以像素计的新位置。 |
案例展示
HTML 代码:
<div style="border:1px solid black;width:100px;height:130px;overflow:auto"> 码云笔记-前端博客,提供许多前端教程帮助大家学习,记录整理博主日常工作笔记和心得,欢迎大家关注收藏码云笔记( mybj123.com ),本博主会不间断的时常更新干货分享到博客中,希望为大家在解决前端的问题上提供绵薄之力,不求回报,只求结交志同道合的前段朋友。 </div> <button class="btn1">把滚动条的水平位置设置为 100px</button>
jQuery 代码:
$(document).ready(function(){ $("button").click(function(){ $("div").scrollLeft(100); }); });
效果展示:
页面滚动置顶悬浮导航菜单代码
HTML 代码:
<div id="header"> <h3>置顶导航菜单,随滚动条浮动定位菜单,固定菜单到顶部</h3> </div> <div id="mynav"> <ul> <li><a href="#">JS 代码</a></li> <li><a href="#">开源框架</a></li> <li><a href="#">jQuery 教程</a></li> <li><a href="#">JS 代码大全</a></li> <li><a href="#">资源工具</a></li> <li><a href="#">用户体验</a></li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">开发手册</a></li> </ul> </div>
CSS 代码:
*{ margin:0; padding:0;} body{ background:#eee; text-shadow:0px 1px 0px rgba(255,255,255,0.60); color:#333;} a{color:#fff; text-decoration:none;} #header{display:block; height:200px; background:#7fcddd; line-height:100px; text-align:center; color:#fff; font-size:16px;text-shadow:0px -1px 0px rgba(30,30,30,0.60);} #header h3{font-size:50px; font-weight:600;height:120px; line-height:120px;} /* 导航部分 */ #mynav{ width:100%; height:40px; background:#2093e0; border-bottom:1px solid #fff; position:relative; z-index:99; color:#fff; line-height:40px;} #mynav ul{width:1000px; padding:0; margin:0 auto; list-style-type:none;} #mynav ul li{ float:left; margin:0px 5px; border-right:1px solid #fff;} #mynav ul li a{ display:block; padding:0px 20px; height:40px; line-height:40px; color:#fff; text-shadow:0px -1px 0px rgba(30,30,30,0.60);}
jQuery 代码:
;(function($) { $.fn.navfix = function(mtop, zindex) { var nav = $(this), mtop = mtop, zindex = zindex, dftop = nav.offset().top - $(window).scrollTop(), dfleft = nav.offset().left - $(window).scrollLeft(), dfcss = new Array; dfcss[0] = nav.css("position"), dfcss[1] = nav.css("top"), dfcss[2] = nav.css("left"), dfcss[3] = nav.css("zindex"), $(window).scroll(function(e) { $(this).scrollTop() > dftop ? $.browser.msie && $.browser.version == "6.0" ? nav.css({ position: "absolute", top: eval(document.documentElement.scrollTop), left: dfleft, "z-index": zindex }) : nav.css({ position: "fixed", top: mtop + "px", left: dfleft, "z-index": zindex }) : nav.css({ position: dfcss[0], top: dfcss[1], left: dfcss[2], "z-index": dfcss[3] }) }) } })(jQuery)
调用方式:
$(document).ready(function(e) { $('#mynav').navfix(0,999); });
第一个值: 你期望导航在距离顶部多少的位置浮动
第二个值: 导航 zindex
压缩版下载
[download id=”1532″]
结束语
jQuery 实现固定顶部 定位滚动导航效果代码,很常见的效果,非常实用;滚动滚动条时,导航固定顶部,以上知识点很简单,就是通过判断滚动条距离 window 的距离的位置,动态赋值 css 样式,不做太多解释,世界附上源码,我也附上压缩版的下载,根据需要进行下载,还是那句话,基础一定要扎实,方能变化多端。
码云笔记 » jQuery置顶导航菜单 随浏览器滚动条浮动定位菜单