<!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做的固定侧栏和当滚动条滚动时顶部固定栏显示/隐藏
猜你喜欢
转载自blog.csdn.net/zmjh1996/article/details/80212309
今日推荐
周排行