jQuery右侧固定层导航锚点定位代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery右侧固定层导航锚点定位代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="sidebar" />
<meta name="description" content="sidebar" />
<title>jQuery右侧固定层导航锚点定位代码</title>
<link rel="stylesheet" href="css/reset.min.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>    
<style type="text/css">
/*侧边栏*/
.hide {
	display: none
}
.side_bar {
	position: fixed;
	left: 50%;
	margin-left: 610px;
	bottom: 20px;
	width: 48px;
	z-index: 10000;
}
.side_bar li {
	margin: 3px 0;
}
.side_bar a {
	display: inline-block;
	padding: 10px 12px;
	line-height: 14px;
	color: #FFF;
}
.side_bar a:hover {
	color: #000000;
}

</style>
</head>
<body>
    <div style="height:900px;background-color: #ff6600;" id="header"></div>
    <div style="height:900px;background-color: #a6ce39;" id="main1"></div>
    <div style="height:900px;background-color: #cb3fd4;" id="main2"></div>
    <div style="height:900px;background-color: #e62469;" id="main3"></div>
    <div style="height:900px;background-color: #fed528;" id="foot"></div>
    
    <!--侧边漂浮边栏-->
    <div class="side_bar hide">
        <ul>
            <li><a href="#foot" style="background-color: #fed528;">劲爆商品</a> </li>
            <li><a href="#main1" style="background-color: #a6ce39;">最新特卖</a> </li>
            <li><a href="#main2" style="background-color: #cb3fd4;">最后疯抢</a> </li>
            <li><a href="#main3" style="background-color: #e62469;">即将开始</a> </li>
            <li><a href="#header" style="background-color: #ff6600;">回到首部</a> </li>
        </ul>
    </div>
	<script>
		$(window).scroll(function() {
			var scroll_len = $(window).scrollTop();
			if (scroll_len > 10) {
				$('.side_bar').fadeIn();
			} else {
				$('.side_bar').fadeOut();
			};
		});
    </script>
</body>
</html>

CSS代码(reset.min.css):

html,body{color:#666;background:#FFF;font-family:"Microsoft YaHei UI","Microsoft YaHei UI Light","微软雅黑","宋体",Helvetica-Black-SemiBold,Tahoma,Arial,sans-serif;font-size:12px;line-height:24px}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset{border:solid 1px #666}
img{border:0}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit}
del,ins{text-decoration:none}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:normal}
h2{font-size:16px}
h3{font-size:14px}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
strong{font-weight:bold}
em{font-style:italic}
a{color:#666;text-decoration:none}
a:hover{color:#06e}
a:focus{outline:thin dotted}
a:hover,a:active{outline:0}
.clear{_zoom:1;clear:both}
.clear:after{content:'\0020';display:block;clear:both;height:0}

附件:下载该文件资源,减少时间成本(增值服务)