【问题标题】:Scroll to top of the div counting navbar height滚动到 div 计数导航栏高度的顶部
【发布时间】: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 没有帮助,很抱歉。部分顶部的填充保留在导航后面。

标签: html css


【解决方案1】:

能否提供Minimal, Reproducible Example

这将使社区提供更好的帮助

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-03
    • 2018-01-22
    • 2021-09-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多