当你有固定标题时如何自动滚动到 div 部分
我下面有以下代码片段。当用户滚动经过标题时，它会变得粘性。然后，当他们单击标题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>
守候你守候我2回答
-
慕后森
问题是你的导航栏覆盖了 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 边框，但如果不需要，可以将其删除。 -
慕妹3146593
您可以这样实现：在每个部分之前添加某种锚点，然后滚动到该部分滚动到不可见的锚点，该锚点将有一些顶部偏移。 <a id='Two'></a> <div class="common">Two</div>#Two { display: block; position: relative; top: -120px; /*Here must be same value as your navbar height is*/ visibility: hidden;}我希望它对你有帮助！
随时随地看视频慕课网APP
相关分类
Html5