視窗滾動一定距離後，導航欄樣式變化，固定到視窗頂部
阿新 • • 發佈：2019-01-22
摘要：在學習前端的過程中，發現Boss直聘網站，在滾動一定距離後，導航欄部分佈局發生變化，固定到視窗頂部，且始終不變。再次回滾後，導航欄佈局恢復。
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>滾動一定距離導航欄固定</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 40px; font-family: '微軟雅黑'; text-align: center; line-height: 100px; width: 100%; } /*頂部*/ .top { height: 100px; background: blue; } /*導航欄部分*/ .nav { height: 100px; background: red; } /*導航欄變異部分*/ .nav2 { height: 100px; background: yellowgreen; } /*測試部分*/ .test { background: #6495ED; height: 2000px; padding-top: 100px; } .fixnav { position: fixed; top: 0px; left: 0px; } </style> </head> <body> <div class="top">頂部</div> <div class="nav">導航欄部分</div> <div class="nav2">導航欄變異部分</div> <div class="test">這個區域僅僅是用於測試的</div> </body> </html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".nav2").hide(); $(window).scroll(function() { if($(document).scrollTop() >= 200) { $(".nav2").addClass("fixnav").slideDown(); } else { $(".nav2").hide(); } }) }) </script>
| 滾動前 | 滾動後 |
 |  |