Sticky menu (navigation) bar leap?
Question
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. 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. 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. 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. It occurs both when clicking on a menu link or just manually scrolling down. Any ideas on how to fix it?
Thanks!
1 answers
solution1
0 2017-04-16 21:30:04
In your JavaScript right below the variable stickyNavTop , put this:
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight
And in your CSS add this:
.sticky {position: fixed; top: 0;}
Hopefully, that should fix it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.