如何强制网页的主要部分从粘性导航栏下方开始（仅 CSS）？

Question

我要制作的网页包含一个粘性导航栏和页面其余部分的一些 div 文本。我想通过在文本 div 的标题处添加目标锚点，从导航栏 link 到页面的另一部分。

这样做时，我注意到我的网页顶部隐藏在导航栏后面。结果是我 link 所在的标题也被隐藏了。

HTML:

<nav class="main-nav">
  <ul class="main-nav__list">
    <li class="main-nav__list-item">
      <a href="#one">One</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#two">Two</a>
    </li>
  </ul>
</nav>

SCSS:

.main-nav {
  position: fixed;
  width: 100vw;
  background-color: $colorGreenBlue;
  .main-nav__list {
    margin: 0;
    padding: 0;
  }
}

有关更多代码，请参阅 http://codepen.io/elinehendrikse/pen/aJVMQo。

我发现了一些处理这个问题的方法：

在主要部分添加'padding-top: 50px'。乍一看这看起来不错，但是当我 link 到页面的另一部分时，这并不能解决问题。
使用“:before”在我要导航到的 div 上方添加 space。这样做的问题是它明显增加了一些 space，这是不可取的。
在代码中添加':target { padding-top: 50px }'。这似乎是一种解决方法，在我想解决这个问题 (Wordpress) 的上下文中也是不可能的。

那么，如何解决页面的主要部分总是从导航栏下方开始的问题？只有 CSS 才有可能吗？

谢谢 :-)

Answer 1

您可以将父级设置为 flexbox column 并将底部区域设置为 flex-grow: 1; overflow-y: scroll

@import url("https://fonts.googleapis.com/css?family=Armata");
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-nav {
  background-color: #00c0ad;
}

.main-nav .main-nav__list {
  margin: 0;
  padding: 0;
}

.main-nav__list-item {
  position: relative;
  display: inline-block;
  background-color: #00c0ad;
  margin-right: -4px;
}

.main-nav__list-item a {
  display: block;
  text-decoration: none;
  font-family: "Armata";
  font-size: 1.5em;
  color: #FFFFFF;
  min-width: 150px;
  padding: 15px 5px 15px 15px;
}

.main-nav__list-item a:hover {
  background-color: #FFFFFF;
  color: #00c0ad;
  -webkit-box-shadow: inset 0px 0px 2px 0px #00c0ad;
  -moz-box-shadow: inset 0px 0px 2px 0px #00c0ad;
  box-shadow: inset 0px 0px 2px 0px #00c0ad;
}

.main-nav__symbol {
  float: right;
}

.dropdown {
  position: absolute;
  display: none;
  padding: 0;
}

ul .main-nav__list-item:hover .dropdown-vertical {
  display: block;
}

ul li ul .main-nav__list-item:hover .dropdown-horizontal {
  display: block;
  width: 100vw;
  top: 0;
  left: 100%;
}

.dropdown-horizontal li {
  float: left;
}

.dropdown-horizontal li a {
  width: 200px;
}

ul li ul li .main-nav__list-item:hover .dropdown-horizontal-vertical {
  display: block;
}

main {
  flex-grow: 1;
  overflow-y: scroll;
}

.section {
  clear: both;
  width: calc(50vw - 15px*2.5);
  margin: 15px 15px;
}

.section .section-header {
  font-family: "Armata";
  font-size: 1.5em;
}

.left {
  float: left;
}

.right {
  float: right;
}

<nav class="main-nav">
  <ul class="main-nav__list">
    <li class="main-nav__list-item">
      <a href="#one">One</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#two">Two</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#">Three<span class="main-nav__symbol">&#9663;</span></a>
      <ul class="dropdown dropdown-vertical">
        <li class="main-nav__list-item">
          <a href="#ten">Ten</a></li>
        <li class="main-nav__list-item">
          <a href="#">Eleven</a>
        </li>
        <li class="main-nav__list-item">
          <a href="#">Twelve</a></li>
        <li class="main-nav__list-item">
          <a href="#">Thirteen<span class="main-nav__symbol">&#9657;</span></a>
          <ul class="dropdown dropdown-horizontal">
            <li class="main-nav__list-item">
              <a href="#">Twenty</a>
            </li>
            <li class="main-nav__list-item">
              <a href="#">Twenty-one<span class="main-nav__symbol">&#9663;</span></a>
              <ul class="dropdown dropdown-horizontal-vertical">
                <li class="main-nav__list-item">
                  <a href="#">Thirty</a></li>
                <li class="main-nav__list-item">
                  <a href="#">Thirty-one</a>
                </li>
              </ul>
              <!-- dropdown-horizontal-vertical -->
            </li>
          </ul>
          <!-- dropdown-horizontal -->
        </li>
      </ul>
      <!-- dropdown-vertical -->
    </li>
  </ul>
</nav>

<main>

  <div class="main">

    <div id="one" class="section left section-one">
      <h1 class="section-header">
    Section one
  </h1>
      <p class="">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie
        eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam
        vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo
        nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales.
        Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend,
        non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet
        tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut
        lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent
        nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt.
        Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna.
      </p>
    </div>

    <div id="two" class="section right section-two">
      <h1 class="section-header">
    Section two
  </h1>
      <p class="">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie
        eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam
        vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo
        nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales.
        Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend,
        non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet
        tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut
        lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent
        nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt.
        Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna.
      </p>
    </div>

    <div id="ten" class="section left section-ten">
      <h1 class="section-header">
    Section ten
  </h1>
      <p class="">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie
        eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam
        vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo
        nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales.
        Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend,
        non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet
        tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut
        lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent
        nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt.
        Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna.
      </p>
    </div>

  </div>

</main>

Answer 2

我认为仅 CSS 你就涵盖了大部分选项。如果您愿意 javascript（例如 jQuery），您可以让页面滚动到 scrollTop 动画，然后从偏移量中减去 100px，如下所示：

$("a[href*='#']:not([href='#'])").click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 100
      }, 1000);
      return false;
    }
  }
});

如何强制网页的主要部分从粘性导航栏下方开始（仅 CSS）？

How to force the main part of a web page starting beneath a sticky navigation bar (CSS only)?

css

navigation

sticky