我正在编写一个个人投资组合网站，我的导航链接到页面下方的不同div。当页面首次打开时，我的一个导航项链接到div的太远，但每隔一段时间它就会起作用。
这是一个问题的粗略例子;我认为问题出在灰色框（在真实网站中是缩略图的容器）和javaScript。
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main3.css" type="text/css" media="all"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/script3.js"></script>
</head>
<body>
<div id="wrapper">
<nav>
<a id="nav_design" href="#design_portfolio_cover"> DESIGN </a>
<a id="nav_illustration" href="#illustration_portfolio_cover"> ILLUSTRATION </a>
</nav>
<section id="design_portfolio">
<div id="design_portfolio_cover">
<h2>Design--working</h2>
</div>
<section id="design_portfolio_body">
<section id="project-d2" class="project">
</section>
<section id="project-d3" class="project">
</section>
<section id="project-d4" class="project">
<div id="portfolio_images-d4" class="portfolio_images">
<div id="thumbnails-d4" class="thumbnails">
</div>
</div>
</section>
</section>
</section>
<section id="illustration_portfolio">
<div id="illustration_portfolio_cover">
<h2>Illustration--not working</h2>
</div>
</section>
<div id="footer_grey" class="fullscreen_grey"></div>
</div><!-- end wrapper -->
</body>
</html>
和CSS ......
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px;
}
#wrapper{
width: 100%;
margin: 0px auto;
}
nav{
box-sizing: border-box;
padding: 16px 0px;
height: 100px;
background-color: white;
position: fixed;
}
#design_portfolio_cover{
padding: 250px 0px;
background-color: #e2b42b;
height: 367px;
width: 100%;
}
#illustration_portfolio_cover{
padding: 250px 0px;
background-color: #e2b42b;
height: 367px;
width: 100%;
}
#design_portfolio_body{
width: 100%;
}
.thumbnails{
width: 805px;
height: 140px;
background-color: gray;
}
/* JS CLASSES */
.thumbnails_fixed{
position: fixed;
bottom: 0px;
}
.thumbnails_final{
position: absolute;
bottom: 0px;
}
/* END JS CLASSES */
#footer_grey{
width:100%;
height: 300px;
float: none;
}
最后，JavaScript
$(window).scroll(function() {
var scroll = $(window).scrollTop();
let project = $('#project-d4').offset().top;
let project2 = $('#illustration_portfolio').offset().top;
if (scroll >= project2){
$('#thumbnails-d4').removeClass('thumbnails_fixed');
$('#thumbnails-d4').addClass('thumbnails_final');
}
if (scroll < project2 && scroll > project){
$('#thumbnails-d4').addClass('thumbnails_fixed');
$('#thumbnails-d4').removeClass('thumbnails_final');
}
});
我希望这不是太多代码......每当我试图删除空元素时，问题就消失了。
我第一次点击#nav_illustration时，会弹出一些#illustration_portfolio_cover。每隔一段时间，它就会像它应该的那样直接进入它的顶部。所有其他链接第一次工作得很好。我只是无法弄清楚为什么它第一次不起作用。有什么想法吗？
问题是你正在将缩略图-d4的位置改为绝对值，这使得它超出正常的内容流量，当你这样做时，你将失去140px的高度，因为它的高度是多少。当你失去那个高度时，你的卷轴太低了。我不确定你的项目如何结合在一起所以我不知道你想如何解决这个问题，但这就是问题所在。
如果符合您的需要，您可以从头开始绝对定位拇指，或者您需要一个占位符来保持距离滚动位置的空间或负140。