【发布时间】:2019-12-05 00:01:02
【问题描述】:
我想将页面完全滚动到部分的顶部。我的意思是计算导航栏的高度,以及部分开始的位置,应该显示在导航栏的下方。但就我而言,这些部分位于导航后面。 (顺便说一句,我正在通过 id 和 href 滚动到 div,我想我应该写一些 js 代码)。
HTML:
<div class="right-nav">
<ul>
<li><a data-scroll="header" href="#header-section" class="active-nav">Ana səhifə</a></li>
<li><a data-scroll="about" href="#about-section">Layihə</a></li>
<li><a data-scroll="terms" href="#terms-section">Qəbul şərtləri</a></li>
<li><a data-scroll="attendants" href="#attendants-section">İştirakçılar</a></li>
<li><a data-scroll="most-asked" href="#most-asked-section">Sual-cavab</a></li>
<li><a data-scroll="contact" href="#contact-section">Əlaqə</a></li>
<li><button class="apply-button " id="popup-opener">Müraciət et</button></li>
</ul>
</div>
<section id="about-section" data-anchor="about">
<div class="left-side-about">
<img src="img/undraw-developer-activity.svg" alt="Image not found :/">
</div>
<div class="right-side-about">
<span>CHALLENGERS CLUB</span>
<h2>Bizim Haqqımızda</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</section>
CSS:
#about-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 80px 0px;
}
.pc-nav {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 1;
padding: 14px 0px;
}
【问题讨论】:
-
我猜你在你的导航栏上使用
position: fixed,这意味着你需要在你的第一个跟随elmenet上添加一个top-margin,与你的导航栏高度等距离。但是,如果您不提供任何代码,就无法为您提供帮助。 -
您能否用代码更新问题,以便我们知道您到目前为止所做的事情,也许我们可以以最佳方式提供解决方案
-
可能是this 对您有帮助。如果它有帮助,请投票给答案。
-
@RickardElimää 是的,我正在使用
position: fixed作为我的导航栏。如果你的意思是我应该在每个部分添加margin-top: my-nav-height,我已经尝试过这种方法。 -
@PullataPraveen 没有帮助,很抱歉。部分顶部的填充保留在导航后面。