我下面有以下代码片段。当用户滚动经过标题时，它变得发粘。然后，当他们单击标题One，Two，Three等中的任何一个选项卡时，它将向下滚动到相应的div。
由于某些原因，当我单击选项卡时，它会滚动到div上方。就像我想滚动到One，Two等部分的顶部，并使其在滚动时显示在粘性标题的正下方。现在，当我单击标题上的导航项时，它会滚动经过粘性标题。有没有其他方法可以实现这一目标？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-size: 28px;
}
#navbar {
overflow: hidden;
background-color: #333;
padding: 25px 16px;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
margin-right: 15px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
}
.common {
border: 1px solid black;
padding: 200px 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="header">
<p>Scroll down to see the sticky effect.</p>
</div>
<div id="navbar">
<a onclick="headerClick(this); return false;" href="#">This is One</a>
<a onclick="headerClick(this); return false;" href="#">This is Two</a>
<a onclick="headerClick(this); return false;" href="#">This is Three</a>
<a onclick="headerClick(this); return false;" href="#">This is Four</a>
</div>
<div class="content">
<div class="common" id="One">This is the first</div>
<div class="common" id="Two">Two</div>
<div class="common" id="Three">Three</div>
<div class="common" id="Four">Four</div>
<div class="common" id="Five">Five</div>
<div class="common">Filler div to make scrolling longer</div>
<div class="common">Filler div to make scrolling longer</div>
<div class="common">Filler div to make scrolling longer</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
document.getElementById("navbar").style.padding = "40px 16px";
} else {
navbar.classList.remove("sticky");
document.getElementById("navbar").style.padding = "25px 16px";
}
}
function headerClick(elem) {
if (elem.innerHTML === 'This is One') {
document.getElementById("One").scrollIntoView();
}
if (elem.innerHTML === 'This is Two') {
document.getElementById("Two").scrollIntoView();
}
if (elem.innerHTML === 'This is Three') {
document.getElementById("Three").scrollIntoView();
}
if (elem.innerHTML === 'This is Four') {
document.getElementById("Four").scrollIntoView();
}
}
</script>
</body>
</html>最佳答案
问题是您的导航栏覆盖了div的顶部。您可以通过使用window.scrollBy()和offsetHeight将窗口再次向上滚动导航栏的高度来避免这种情况。该解决方案的优点是它不需要您知道导航栏的起始高度，因此它允许各种不同的浏览器配置。
function headerClick(elem) {
if (elem.innerHTML === 'One') {
document.getElementById("One").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Two') {
document.getElementById("Two").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Three') {
document.getElementById("Three").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Four') {
document.getElementById("Four").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Five') {
document.getElementById("Five").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
}
额外的-2是为了确保可以看到div边框，但是如果不需要，可以将其删除。
关于javascript - 标题固定时如何自动滚动到div部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61161281/