粘菜單（導航）欄是否跳躍？
[英]Sticky menu (navigation) bar leap?
問題描述
我們正在ICT班上建立一個網站，我在一個網站上找到了一個很酷的代碼，可以讓您在某個時候修復導航欄。 這是整個網站代碼：
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); var stickyNavTop = $('.nav').offset().top; var stickyNav = function() { var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('.nav').addClass('sticky'); } else { $('.nav').removeClass('sticky'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); });
body { background-color: #FFFFFF; background-image: url(img/background.jpg); background-repeat: repeat; } .sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; } .nav { padding: 25px 0; position: -webkit-sticky; top: -20px; z-index: 1; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>AGEA</title> </head> <body> <table width="900" border="0" align="center" bgcolor="transparent"> <tr> <td> <table width="900" align="center"> <tr> <td> <p align="center" class="Estilo2">TITLE</p> <p align="center" class="Estilo2">Please, choose your English level below.</p> </td> </tr> </table> <div class="nav"> <p align="center"> <a href="#a1"> <img src="img/a1_1.png" width="60" onmouseover="this.src='img/a1_2.png'" onmouseout="this.src='img/a1_1.png'"> </a> <a href="#a2"> <img src="img/a2_1.png" width="60" onmouseover="this.src='img/a2_2.png'" onmouseout="this.src='img/a2_1.png'"> </a> <a href="#b1"> <img src="img/b1_1.png" width="60" onmouseover="this.src='img/b1_2.png'" onmouseout="this.src='img/b1_1.png'"> </a> <a href="#b2"> <img src="img/b2_1.png" width="60" onmouseover="this.src='img/b2_2.png'" onmouseout="this.src='img/b2_1.png'"> </a> <a href="#c1"> <img src="img/c1_1.png" width="60" onmouseover="this.src='img/c1_2.png'" onmouseout="this.src='img/c1_1.png'"> </a> <a href="#c2"> <img src="img/c2_1.png" width="60" onmouseover="this.src='img/c2_2.png'" onmouseout="this.src='img/c2_1.png'"> </a> </p> </div> <table width="800" align="center"> <tr> <td> <center></center> </td> </tr> </table> <a name="a1"> <p class="Estilo2">A1</p> </a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="a2"> <p class="Estilo2">A2</p> </a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="b1"> <p class="Estilo2">B1</p> </a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="b2"> <p class="Estilo2">B2</p> </a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="c1"> <p class="Estilo2">C1</p> </a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a name="c2"> <p class="Estilo2">C2</p> </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 /> </td> </tr> </table> <p align="center" class="Estilo1">© AG</p> </body> </html>
它可以在Mac上的Safari上完美運行。 如您所見，帶有6個不同英語級別圖像的導航欄可以正常工作，當您單擊其中之一時，它會平滑向下滾動到所選級別。 但是在Chrome（我沒有嘗試過其他瀏覽器）上，當導航欄到達停止滾動並固定的位置時，似乎出現了一些像素的滾動飛躍，這非常明顯，而我卻沒有不知道為什么會這樣。 單擊菜單鏈接或僅手動向下滾動時都會發生。 關於如何解決它的任何想法？
謝謝！
1 個解決方案
解決方案1
0 2017-04-16 21:30:04
在您的JavaScript中，在變量stickyNavTop ，輸入以下內容：
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight
並在您的CSS中添加以下內容：
.sticky {position: fixed; top: 0;}
希望那應該解決它。
帶有 3 行下拉菜單的粘性響應式頂部導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.