无法让 "position: sticky" 在我的导航栏上工作。任何帮助表示赞赏

Question

我一直在努力让“粘性”CSS 属性在我的导航栏上工作，但我不知道如何做。一开始我以为是flexbox的问题，所以我把它全部去掉了，还是不行。然后我认为这可能是 child-parent 问题，但在以这种方式进行故障排除后仍然无法正常工作。我也不想使用 position: fixed 因为据我所知，它通过将其他内容放在其顶部来切断其他内容的顶部。与粘性不同。任何帮助将不胜感激。

@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@600&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica;
  padding: 0px;
  margin: 0px;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 7vh;
  padding: 10px;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  font-family: sans-serif;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 17px;
}

.main-nav a {
  color: inherit;
  padding: 0;
  text-decoration: none;
  padding: 1rem;
}

.main-nav .nav-right {
  justify-items: right;
}

.main-nav li:hover {
  color: rgba(0, 0, 0, 0.5);
}

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(161, 117, 63);
  background: linear-gradient(90deg, rgba(161, 117, 63, 1) 0%, rgba(192, 139, 74, 1) 50%, rgba(161, 117, 63, 1) 100%);
  width: 100%;
  height: 50vh;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.header-content {
  color: rgb(255, 255, 255);
  font-size: 125px;
  position: absolute;
  white-space: nowrap;
  font-family: 'Stick No Bills', sans-serif;
  text-decoration: underline;
}

.header-content-subheading {
  position: relative;
  display: inline;
  padding-top: 175px;
  font-size: 17px;
  font-family: monospace;
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .header-content {
    font-size: 110px;
  }
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="homepageStyle.css">
  <title>Iron Wood</title>
</head>

<body>
  <header>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#"><i class="fa fa-shopping-cart"></a></i>
        </li>
      </ul>
    </nav>
  </header>
  <div class="header-container">
    <div class="header-content tracking-in-expand">Iron Wood</div>
    <div class="header-content-subheading">Custom Woodworking</div>
  </div>
</body>

Answer 1

改为将粘性代码添加到 header 元素。

顺便说一下，很酷的文字动画。

@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@600&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica;
  padding: 0px;
  margin: 0px;
  min-height: 300vh;
}

header {
  z-index: 100;
  position: sticky;
  top: 0;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 7vh;
  padding: 10px;
  background-color: #ffffff;
  font-family: sans-serif;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 17px;
}

.main-nav a {
  color: inherit;
  padding: 0;
  text-decoration: none;
  padding: 1rem;
}

.main-nav .nav-right {
  justify-items: right;
}

.main-nav li:hover {
  color: rgba(0, 0, 0, 0.5);
}

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(161, 117, 63);
  background: linear-gradient(90deg, rgba(161, 117, 63, 1) 0%, rgba(192, 139, 74, 1) 50%, rgba(161, 117, 63, 1) 100%);
  width: 100%;
  height: 50vh;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.header-content {
  color: rgb(255, 255, 255);
  font-size: 125px;
  position: absolute;
  white-space: nowrap;
  font-family: 'Stick No Bills', sans-serif;
  text-decoration: underline;
}

.header-content-subheading {
  position: relative;
  display: inline;
  padding-top: 175px;
  font-size: 17px;
  font-family: monospace;
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .header-content {
    font-size: 110px;
  }
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="homepageStyle.css">
  <title>Iron Wood</title>
</head>

<body>
  <header>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#"><i class="fa fa-shopping-cart"></a></i>
        </li>
      </ul>
    </nav>
  </header>
  <div class="header-container">
    <div class="header-content tracking-in-expand">Iron Wood</div>
    <div class="header-content-subheading">Custom Woodworking</div>
  </div>
</body>

Answer 2

position: sticky 有效但不可见，因为它是

relative to its nearest scrolling ancestor
https://developer.mozilla.org/en-US/docs/Web/CSS/position

这是header。

两个选项

1.On main-nav，可以用position: fixed代替sticky:

.main-nav {
    position: fixed;
    width: 100%;
    z-index: 999;
}

2.or 将 position: sticky 移动到 header 上，因此它会影响 body 元素：

header {
  position: sticky;
  top: 0
  z-index: 1;
 }

无法让 "position: sticky" 在我的导航栏上工作。任何帮助表示赞赏

Can't get "position: sticky" to work on my navbar. Any help is appreciated

html

css

css-position