HTML+css+jQuery做的固定侧栏和当滚动条滚动时顶部固定栏显示/隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fixed_test_zmjh</title>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/><!-- 在侧栏用的第三方图标库可以不要-->
		<script src="js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin: 0 0;
				padding: 0 0;
				background: #f6f6f6;
			}
			.top{
        		position:fixed;  
        		width: 100%;
        		height: 50px;
        		background: #abc797;
        		top:0;
        		z-index: 1996;
        		display: none;
        }
        a{
        	background: #abc797;
        	width: 40px;
        	height: 24px;
        	text-align: center;
        	vertical-align:middle;
        	font-size: 30px;
        	color: #fff;
        	display:block;
        	opacity: .9;
        	padding: 8px 0;
        	line-height:24px;
        	text-decoration:none;
        	border-bottom: solid 1px #eee;
        }
        .ce{
        	border: solid 1px #eee;
        	display: table; 
        	position: fixed;
        	z-index: 1997;
            border-collapse: collapse;
            width: 40px;
            right: 5px;
            top:50%;
            margin-top: -90px;
        }
		</style>
	</head>
	<body>
		<a name="top1" id="" style="color: #000;font-size:48px" class="" ></a>
		<!--br只是为了产生滚动条可滚动的空间-->
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<!-->固定顶栏<-->
			<div class="top" id='top'></div>
				<!-->固定侧栏<-->
				<div class="ce" id="ce">
					<a href="#top1" class="fa fa-angle-up" style="font-size: 25px;" id="zhiding"></a>
					<a href="#top1" class="fa fa-user" style="font-size: 25px;"></a>
					<a href="#top1" class="fa fa-cog" style="font-size: 25px;"></a>
					<a href="#top1" class="fa fa-comments" style="font-size: 25px;"></a>
					<a href="#top1" class="fa fa-qrcode" style="font-size: 25px;"></a>
					<a href="#top1" class="fa fa-share-alt" style="font-size: 25px;"></a>
				</div>
		<script type="text/javascript">
			//页面加载
			window.onload=function(){
				$("#top").fadeOut("fast");//顶部隐藏
				$("#zhiding").fadeOut("fast");//置顶按钮隐藏
			}
			//滚动条滚动事件
			$(document).scroll(function() {
 				t=window.pageYOffset;//获取滚动条距顶部距离
                var top = document.getElementById('top');//获取固定顶栏的操作对象
                if(t>=parseFloat($("#top").css("height"))){
						$("#top").fadeIn("slow");//顶部显示
						$("#zhiding").fadeIn("slow");//置顶按钮显示
                }else{ 
                    	$("#top").fadeOut("slow");//顶部隐藏
                     $("#zhiding").fadeOut("slow");//置顶按钮隐藏
                }
				});
		</script>
	</body>
</html>
图标库参考：菜鸟教程：点击打开链接查看
HTML+css+jQuery做的固定侧栏和当滚动条滚动时顶部固定栏显示/隐藏

猜你喜欢
