基於jQuery實現頁面滾動時頂部導航顯示隱藏效果
阿新 • • 發佈:2017-08-22
center query styles 顯示 true function viewport top int
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" type="text/css" href=""> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/common.css"> <style type="text/css"> .top-title { background:#e74c3c; color:white; font-size:24px; padding:5px; text-align:center; position: fixed; left:0; top:0; width:100%; transition: top .5s; } .hiddened { top: -90px; } .showed { top:0; z-index: 9999; } .margint { height: 1500px; background-color: red; } </style> </head> <body> <div class="top-title">這是頂部導航條</div> <div class="margint"> <p>滾動看效果</p> <p>滾動看效果</p> <p>滾動看效果</p> </div> <script src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var winHeight = $(document).scrollTop(); $(window).scroll(function() { var scrollY = $(document).scrollTop();// 獲取垂直滾動的距離,即滾動了多少 if (scrollY > 550){ //如果滾動距離大於550px則隱藏,否則刪除隱藏類 $(‘.top-title‘).addClass(‘hiddened‘); }else { $(‘.top-title‘).removeClass(‘hiddened‘); } if (scrollY > winHeight){ //如果沒滾動到頂部,刪除顯示類,否則添加顯示類 $(‘.top-title‘).removeClass(‘showed‘); } else { $(‘.top-title‘).addClass(‘showed‘); } }); }); </script> </body> </html>
基於jQuery實現頁面滾動時頂部導航顯示隱藏效果