粘性導航欄不粘-有解無憂

我在 a 里面有一個導航欄header ，我試圖sticky在整個頁面上制作它。我到處尋找解決方案，我嘗試了很多方法來解決我的問題（不overflow，洗掉flexbox，height在父級上設定 a 等），但不幸的是無濟于事。只是有一點我不明白。我添加了一個類的.sticky我h1，只是為了測驗它，當然是作品。

我在一個片段中包含了我的 HTML 和 CSS。希望大家都能清楚地理解它。任何幫助將不勝感激！

這是該頁面的鏈接：https : //puzzi22.github.io/cambios-climaticos/index.html

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 0 0 0;
  background-color: white;
  text-transform: uppercase;
  font-weight: 800;
  overflow-y: visible;
}

.header-flex {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: auto;
}

.lema {
  font-weight: 400;
  order: -1;
  margin: 0;
}

.company-name {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.nav-links {
  font-size: 1rem;
  padding-bottom: 1rem;
  line-height: 1.4;
}

.nav-links li {
  display: inline-block;
  margin-right: 3rem;
}


/* STICKY ELEMENT */

.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-start;
}


/* SOME CONTAINERS */

.container-desktop {
  width: 70%;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  gap: 10%;
  align-content: center;
}


/* SOME STYLING (that shouldn't affect anything) */

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

header a {
  color: orange;
}

header a:hover {
  color: rgba(0, 0, 0, 0.5);
}

<header>
  <div class="header-flex container-desktop">
    <span class="company-name">
      <a href="#">1,5 &#8451;</a>
    </span>
    <span class="lema">No hay planeta B</span>
    <nav class="sticky">
      <ul class="nav-links">
        <li>
          <a href="#">Síntomas</a>
        </li>
        <li>
          <a href="#">Videos</a>
        </li>
        <li>
          <a href="#">COP26</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<main class="container-desktop">
  <h1 class="sticky">Beginning of MAIN</h1>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

uj5u.com熱心網友回復：

我感覺到你的痛苦。不久前，我處理了同樣令人沮喪的問題。我發現這是因為我在另一個 div 中有我的粘性元素。所以不允許粘在頁面的頂部。我把你的導航欄從 div 標簽中拉出來，它按預期作業。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 0 0 0;
  background-color: white;
  text-transform: uppercase;
  font-weight: 800;
  overflow-y: visible;
}

.header-flex {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: auto;
}

.lema {
  font-weight: 400;
  order: -1;
  margin: 0;
}

.company-name {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.nav-links {
  font-size: 1rem;
  padding-bottom: 1rem;
  line-height: 1.4;
}

.nav-links li {
  display: inline-block;
  margin-right: 3rem;
}


/* STICKY ELEMENT */

.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-start;
}


/* SOME CONTAINERS */

.container-desktop {
  width: 70%;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  gap: 10%;
  align-content: center;
}


/* SOME STYLING (that shouldn't affect anything) */

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

header a {
  color: orange;
}

header a:hover {
  color: rgba(0, 0, 0, 0.5);
}

<header>
  <div class="header-flex container-desktop">
    <span class="company-name">
      <a href="#">1,5 &#8451;</a>
    </span>
    <span class="lema">No hay planeta B</span>
  </div>
</header>
<nav class="header-flex container-desktop">
      <ul class="nav-links">
        <li>
          <a href="#">Síntomas</a>
        </li>
        <li>
          <a href="#">Videos</a>
        </li>
        <li>
          <a href="#">COP26</a>
        </li>
      </ul>
</nav>

<main class="container-desktop">
  <h1 class="sticky">Beginning of MAIN</h1>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

uj5u.com熱心網友回復：

這就是你要的嗎？我只是將粘性類放在標題元素上。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 0 0 0;
  background-color: white;
  text-transform: uppercase;
  font-weight: 800;
  overflow-y: visible;
}

.header-flex {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: auto;
}

.lema {
  font-weight: 400;
  order: -1;
  margin: 0;
}

.company-name {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.nav-links {
  font-size: 1rem;
  padding-bottom: 1rem;
  line-height: 1.4;
}

.nav-links li {
  display: inline-block;
  margin-right: 3rem;
}


/* STICKY ELEMENT */

.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-start;
}


/* SOME CONTAINERS */

.container-desktop {
  width: 70%;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  gap: 10%;
  align-content: center;
}


/* SOME STYLING (that shouldn't affect anything) */

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

header a {
  color: orange;
}

header a:hover {
  color: rgba(0, 0, 0, 0.5);
}

<header class="sticky">
  <div class="header-flex container-desktop">
    <span class="company-name">
      <a href="#">1,5 &#8451;</a>
    </span>
    <span class="lema">No hay planeta B</span>
    <nav class="sticky">
      <ul class="nav-links">
        <li>
          <a href="#">Síntomas</a>
        </li>
        <li>
          <a href="#">Videos</a>
        </li>
        <li>
          <a href="#">COP26</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<main class="container-desktop">
  <h1>Beginning of MAIN</h1>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381199.html

標籤：html css 导航栏黏

上一篇：如何在CinnamonApplet(Gnome)的`St.Entry`中更改_selected_文本的顏色？

下一篇：svg虛線圓影片所以它旋轉