<!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.οnlοad=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做的固定侧栏和当滚动条滚动时顶部固定栏显示/隐藏
最新推荐文章于 2023-04-19 18:31:44 发布