今天带大家来实现一个大家经常在网站上看到的导航效果，置顶导航菜单,并随滚动条浮动定位菜单,固定菜单到顶部，就像码云笔记导航菜单效果一样，大家可以滚动试一下。之前我写过一篇类似文章，只不过是菜单没有根据滚动条判断，大家可以看一下《jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动》，今天效果实现思路很简单，获取要定位元素距离浏览器顶部的距离，滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定。先来介绍一下用到哪些jQuery CSS 操作方法。
scrollTop() 方法
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
语法
$(selector).scrollTop(offset)
参数
描述
offset
可选。规定相对滚动条顶部的偏移，以像素计。
提示和注释
注释：该方法对于可见元素和不可见元素均有效。
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。
通过例子看一下
HTML代码：
码云笔记-前端博客，提供许多前端教程帮助大家学习，记录整理博主日常工作笔记和心得，欢迎大家关注收藏码云笔记( )，本博主会不间断的时常更新干货分享到博客中，希望为大家在解决前端的问题上提供绵薄之力，不求回报，只求结交志同道合的前段朋友。
获得 scrollbar top offset
试着移动滚动条，然后再次点击按钮。
jQuery代码:
$(document).ready(function(){
$(".btn1").click(function(){
alert($("div").scrollTop()+" px");
});
});
效果展示：
scrollLeft() 方法
定义和用法
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。
返回水平滚动条位置
返回第一个匹配元素的水平滚动条位置。
语法
$(selector).scrollLeft()
参数
描述
position
可选。规定以像素计的新位置。
案例展示
HTML代码：
码云笔记-前端博客，提供许多前端教程帮助大家学习，记录整理博主日常工作笔记和心得，欢迎大家关注收藏码云笔记( )，本博主会不间断的时常更新干货分享到博客中，希望为大家在解决前端的问题上提供绵薄之力，不求回报，只求结交志同道合的前段朋友。
把滚动条的水平位置设置为 100px
jQuery代码：
$(document).ready(function(){
$("button").click(function(){
$("div").scrollLeft(100);
});
});
效果展示：
页面滚动置顶悬浮导航菜单代码
HTML代码：
置顶导航菜单,随滚动条浮动定位菜单,固定菜单到顶部
JS代码开源框架jQuery教程JS代码大全资源工具用户体验HTML5CSS3开发手册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样式，不做太多解释，世界附上源码，我也附上压缩版的下载，根据需要进行下载，还是那句话，基础一定要扎实，方能变化多端。
