如何使用固定导航使fullpage.js适合页面？

Question

我的问题是我的固定引导程序导航覆盖了我的页面的60px（导航的高度），所以它正在拧紧我所拥有的列的“填充”。

我试图将margin：60px放在.section上，但它只是将页面向下推60px，而不是将页面大小调整为60px。相反，底部隐藏着60px。

列上没有定义填充顶部/底部。它们用display：flex和align-items：center定义，div包含文本，因此它将一直居中。

https://jsfiddle.net/fmcq9wpn/7/

CSS：

.col-lg-6 {
        display: flex;
        align-items: center;

        .text {
            padding: 0 5%;
            h3 {
                font-weight: bold;
                padding-bottom: 10px;
            }
            p {
                line-height: 2.0;
            }
        }
    }

HTML：

<div class="section news">
        <div class="row">
            <div class="picture col-lg-6 col-md-6 col-12 col-sm-12">

            </div>
            <div class="col-lg-6 col-md-6 col-12 col-sm-12">
                <div class="text">

                    <p>Mandag 27. Januar, 2019</p>
                    <H3>COACHING-FOREDRAGSRÆKKE PÅ UNIVERSITET</H3>
                    <p>Har man lyst til at vide mere om coaching fra forskellige, faglige perspektiver, arrangerer
                        professor
                        Reinhardt Stelter en foredragsrække på . . .</p>
                    <br> <button>Læs mere</button>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="news-box col-lg-6 col-md-6 col-12 col-sm-12">
                <div class="text">
                    <p>Torsdag 5. Februar, 2019</p>
                    <h3>SIKKEN FEST!</h3>
                    <p>Tak til alle gæster, som kom og fejrede det nye års ankomst sammen med os! Det blev en
                        vidunderlig
                        fredag . . .</p><br>
                    <button>Læs mere</button>
                </div>
            </div>
            <div class="picture col-lg-6 col-md-6 col-12 col-sm-12">

            </div>
        </div>
    </div>

<nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Cpenhagen Coaching Center</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      Menu <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" data-proofer-ignore href="/#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-proofer-ignore href="/#education">Education</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-proofer-ignore href="/#testimonial">Testimonial</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-proofer-ignore href="/#news">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-proofer-ignore href="/#signup">Sign up</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-proofer-ignore href="/#footer">Footer</a>
          </li>
      </ul>
    </div>
  </nav>

这就像.section将始终与窗口大小相同。

我在这里有一张照片：https://ibb.co/BgskKSb显示布局。

Answer 1

使用fullpage.js选项paddingTop。例如：

new fullpage('#fullpage', {
   paddingTop: '60px'
});