Fixed sidebar made by HTML+css+jQuery and top fixed bar show/hide when scroll bar scrolls

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fixed_test_zmjh</title>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/><!-- The third-party icon library used in the sidebar can not be used-->
		<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;
        }
        .this{
        	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 is just to generate scrollable space -->
	<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 />
			<!-->Fixed top bar<-->
			<div class="top" id='top'></div>
				<!-->Fixed sidebar<-->
				<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">
			// page load
			window.onload=function(){
				$("#top").fadeOut("fast");//The top is hidden
				$("#zhiding").fadeOut("fast");//The top button is hidden
			}
			//scroll bar scroll event
			$(document).scroll(function() {
 				t=window.pageYOffset;//Get the distance from the scroll bar to the top
                var top = document.getElementById('top');//Get the operation object of the fixed top bar
                if(t>=parseFloat($("#top").css("height"))){
						$("#top").fadeIn("slow");//Top display
						$("#zhiding").fadeIn("slow");//Top button display
                }else{
                    	$("#top").fadeOut("slow");//The top is hidden
                     $("#zhiding").fadeOut("slow");//The top button is hidden
                }
				});
		</script>
	</body>
</html>
Icon library reference: rookie tutorial: click to open the link to view
Fixed sidebar made by HTML+css+jQuery and top fixed bar show/hide when scroll bar scrolls

Guess you like
