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

目录
文章目录隐藏
  1. scrollTop() 方法
  2. scrollLeft() 方法
  3. 页面滚动置顶悬浮导航菜单代码
  4. 结束语

今天带大家来实现一个大家经常在网站上看到的导航效果,置顶导航菜单,并随滚动条浮动定位菜单,固定菜单到顶部,就像码云笔记导航菜单效果一样,大家可以滚动试一下。之前我写过一篇类似文章,只不过是菜单没有根据滚动条判断,大家可以看一下《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");
  });
});

效果展示:

获得当前的 scroll top offset

 

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 样式,不做太多解释,世界附上源码,我也附上压缩版的下载,根据需要进行下载,还是那句话,基础一定要扎实,方能变化多端。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jQuery置顶导航菜单 随浏览器滚动条浮动定位菜单

发表回复