jQuery置顶导航菜单 随浏览器滚动条浮动定位菜单

今天带大家来实现一个大家经常在网站上看到的导航效果，置顶导航菜单,并随滚动条浮动定位菜单,固定菜单到顶部，就像码云笔记导航菜单效果一样，大家可以滚动试一下。之前我写过一篇类似文章，只不过是菜单没有根据滚动条判断，大家可以看一下《jquery 插件固定导航条在浏览器顶部不随滚动条的下拉而移动》，今天效果实现思路很简单，获取要定位元素距离浏览器顶部的距离，滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定。先来介绍一下用到哪些 jQuery CSS 操作方法。

scrollTop() 方法

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(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()

案例展示

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置顶导航菜单 随浏览器滚动条浮动定位菜单的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。