粘菜单（导航）栏是否跳跃？
[英]Sticky menu (navigation) bar leap?
问题描述
We are building a website at our ICT class and I found a cool code on a website that lets you fix a navigation bar at some point. 
我们正在ICT班上建立一个网站，我在一个网站上找到了一个很酷的代码，可以让您在某个时候修复导航栏。 This is the whole website code: 这是整个网站代码：
$(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>
It works beautifully on Safari for Mac. 它可以在Mac上的Safari上完美运行。 As you can see, the navigation bar with the 6 different English level images work perfectly and when you click on one of them, it scrolls down smoothly to the chosen level. 如您所见，带有6个不同英语级别图像的导航栏可以正常工作，当您单击其中之一时，它会平滑向下滚动到所选级别。 But on Chrome (I haven't tried any other browsers), when the navigation bar gets to the point of stopping to scroll and becomes fixed, there seems to be a sort of scrolling leap of some pixels, which is very visible and I don't know why it happens. 但是在Chrome（我没有尝试过其他浏览器）上，当导航栏到达停止滚动并固定的位置时，似乎出现了一些像素的滚动飞跃，这非常明显，而我却没有不知道为什么会这样。 It occurs both when clicking on a menu link or just manually scrolling down. 单击菜单链接或仅手动向下滚动时都会发生。 Any ideas on how to fix it? 关于如何解决它的任何想法？
Thanks! 谢谢！
1 个解决方案
解决方案1
0 2017-04-16 21:30:04
In your JavaScript right below the variable stickyNavTop , put this: 在您的JavaScript中，在变量stickyNavTop ，输入以下内容：
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight
And in your CSS add this: 并在您的CSS中添加以下内容：
.sticky {position: fixed; top: 0;}
Hopefully, that should fix it. 希望那应该解决它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.