scrollfix置顶导航菜单插件-幸凡学习网

scrollfix置顶导航菜单插件

用声音读出全文

关注我吧

2016/4/1 20:14:38 阅读次数:9647Tags:js 插件菜单 scroll

1、前言

本插件效果：随滚动条下拉浮动定位菜单,菜单固定到顶部。兼容了移动端+PC端（IE6+,chorme,firfox等主浏览器），使用起来特别方便。效果图如下：

scrollfix置顶导航菜单插件

2、使用scrollfix插件

;(function($) {
    $.fn.scrollfix = function(mtop, zindex, height) {
        var nav = $(this),
		obj=document.getElementById($(this).attr("id")),		
        mtop = mtop,
        zindex = zindex,
        dftop = nav.offset().top,
		//dftop = nav.offset().top - $(window).scrollTop(),
        dfleft = nav.offset().left - $(window).scrollLeft();
		var id=$(nav).attr("id");
		$("<div id=\""+id+"_blank\"></div>").insertAfter(nav);
        $(window).scroll(function(e) {
			var scrollblank=$("#"+id+"_blank");
            if($(this).scrollTop() > dftop)
			{
				if($.browser.msie && $.browser.version == "6.0" )
				{
					nav.css({
						position: "absolute",
						top: eval(document.documentElement.scrollTop),
						left: dfleft,
						"z-index": zindex
					})
				}
				else 
				{	
					nav.css({
						position: "fixed",
						top: mtop + "px",
						left: dfleft,
						"z-index": zindex
					})
				}
				$(scrollblank).css("height",height+"px");
			}
			else
			{
				$(nav).removeAttr("style");
				$(scrollblank).removeAttr("style");
			}
        })		
    }
})(jQuery)

3、使用方法及说明

$(document).ready(function(e) { 
	$("#scrollnav").scrollfix(0,999,40);
});

说明：第一个值：菜单距离顶部多少的位置开始浮动(0,当滚动条滚动到菜单位置时就开始滚动,具体大小自己可以尝试下）
第二个值：导航zindex（越大层级越高）
第三个值：导航真实高度,用于置顶时填补固定高度（防止内容突然上移导致）

4、完整源代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scrollfix置顶导航菜单</title>
<style>
body,html,p,div,ul,li,h3,h4{margin:0;padding:0;}
body{background:#eee;color:#333;font-size:14px;}
a{text-decoration:none;}
#top{display:block;padding:50px 0;background:#FFC;text-align:center;}
#top a{color:#f60;display:block;line-height:30px;}
#scrollnav{width:100%;height:40px;background:#F80;position:relative;z-index:99;color:#fff;line-height:40px;}
#scrollnav ul{width:100%;list-style-type:none;}
#scrollnav ul li{ float:left;width:20%;text-align:center;}
#scrollnav ul li:last-child a{border-right:none;}
#scrollnav ul li a{display:block;height:40px;line-height:40px;color:#fff;border-right:1px solid #fa0;color:#fff;}

.st1{height:2600px;background:#eee;padding:15px;font-size:14px;color:#666;}
</style>
</head>

<body>
<div id="top">
 <p>随滚动条浮动定位菜单,固定菜单到顶部</p>
 <p><a href="http://www.86y.org" target="_blank">www.86y.org</a></p>
</div>

<div id="scrollnav">
  <ul>
   <li><a href="http://www.86y.org/s.aspx?tag=js" target="_blank">JS</a></li>
   <li><a href="http://www.86y.org/s.aspx?tag=css" target="_blank">css</a></li>
   <li><a href="http://www.86y.org/s.aspx?tag=div" target="_blank">div</a></li>
   <li><a href="http://www.86y.org/s.aspx?tag=html5" target="_blank">html5</a></li>
   <li><a href="http://www.86y.org/s.aspx?tag=css3" target="_blank">css3</a></li>
  </ul> 
</div>
<div class="st1">
 <p>使用方式：</p>
  $(document).ready(function(e) { <br/>
         $('#scrollnav').scrollfix(0,999,40); <br/>    
  });<br/>
//www.86y.org<br/>
//第一个值： 你期望导航在距离顶部多少的位置浮动<br/>  
//第二个值： 导航zindex<br/>
//第三个值： 导航真实高度,用于置顶时填补固定高度     
</div>


<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
;(function($) {
    $.fn.scrollfix = function(mtop, zindex, height) {
        var nav = $(this),
		obj=document.getElementById($(this).attr("id")),		
        mtop = mtop,
        zindex = zindex,
        dftop = nav.offset().top,
		//dftop = nav.offset().top - $(window).scrollTop(),
        dfleft = nav.offset().left - $(window).scrollLeft();
		var id=$(nav).attr("id");
		$("<div id=\""+id+"_blank\"></div>").insertAfter(nav);
        $(window).scroll(function(e) {
			var scrollblank=$("#"+id+"_blank");
            if($(this).scrollTop() > dftop)
			{
				if($.browser.msie && $.browser.version == "6.0" )
				{
					nav.css({
						position: "absolute",
						top: eval(document.documentElement.scrollTop),
						left: dfleft,
						"z-index": zindex
					})
				}
				else 
				{	
					nav.css({
						position: "fixed",
						top: mtop + "px",
						left: dfleft,
						"z-index": zindex
					})
				}
				$(scrollblank).css("height",height+"px");
			}
			else
			{
				$(nav).removeAttr("style");
				$(scrollblank).removeAttr("style");
			}
        })		
    }
})(jQuery)
</script>
<script type="text/javascript">
$(document).ready(function(e) {
	$("#scrollnav").scrollfix(0,999,40);    
});
</script>
</body>
</html>

5、结语

特效比较简单，使用很方便。以前写的，现在是整理一些特效方便日后也方便大家，所以有什么问题可以与我联系。
(完)

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=773【scrollfix置顶导航菜单插件】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)