我们正在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>
它适用于Safari for Mac。如您所见，带有6种不同英语级别图像的导航栏可以很好地工作，当您单击其中一个时，它会平滑地向下滚动到所选级别。但是在Chrome上（我没有尝试过任何其他浏览器），当导航栏到达停止滚动并变得固定时，似乎有一些像素的滚动跳跃，这是非常明显的我不喜欢不知道为什么会这样。单击菜单链接或仅手动向下滚动时都会发生这种情况。关于如何解决它的任何想法？
谢谢！
答案 0 :(得分：0)
在变量stickyNavTop下面的JavaScript中，输入：
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight
在你的CSS中添加：
.sticky {position: fixed; top: 0;}
希望，这应该解决它。