HTML+css+jQuery做的固定側欄和當滾動條滾動時頂部固定欄顯示/隱藏
阿新 • • 發佈：2019-02-18
圖示庫參考：菜鳥教程：點選開啟連結檢視<!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>