css - 如何强制网页的主要部分从粘性导航栏下方开始(仅限 CSS)？

标签 css navigation sticky

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

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

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更多代码。

我找到了一些处理这个问题的选项:

  1. 在主要部分添加“padding-top: 50px”。乍一看这看起来不错，但当我链接到页面的其他部分时，这并不能解决问题。

  2. 使用 ':before' 在我想要导航到的 div 上方添加空间。这样做的问题是，它明显增加了一些空间，这是不可取的。

  3. 将“:target { padding-top: 50px }”添加到代码中。这似乎是一种解决方法，并且在我想要解决此问题的上下文中也是不可能的(Wordpress)。

那么，如何解决页面的主要部分始终从导航栏下方开始的问题？仅使用 CSS 可以吗？

谢谢:-)

最佳答案

您可以将父级设为 flex 盒 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>

关于css - 如何强制网页的主要部分从粘性导航栏下方开始(仅限 CSS)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43946462/

上一篇：css - 如何显示:after content inline with the parent element?

下一篇：css - 计算 fr 单位的实际长度

相关文章：

javascript - 打印问题分页

javascript - 为什么 CSS.registerProperty 在 JavaScript 而不是在 CSS？

CSS 导航(浏览器问题)

javascript - 如何停用 Bootstrap 的移动视口(viewport)滚动监视？

css - 导航问题 HTML 和 CSS

javascript - 我该怎么做才能模拟位置 :Sticky?

css - 位置 : sticky in header is not working

css - 按钮下的 float 模态窗口

css - svg 中圆的双描边颜色

css - Safari位置:粘性在overflow:auto元素中不起作用

©2024 IT工具网  联系我们