我一直在沮丧地试图让“粘粘的”CSS属性在我的navbar上工作，但不知道如何工作。一开始我以为是flexbox，所以我把它都移除了，它还是不起作用。然后我想这可能是一个孩子和父母的问题，但还是不能让它工作后，排除了故障。我也不想使用位置：固定，因为据我所知，它切断了其他内容的顶部，把它放在它的顶部。不像粘粘的。如有任何帮助，不胜感激。

顺晟科技：

改为将粘滞代码添加到元素中。

顺便说一句，很酷的文本动画。

有效，但不可见，因为它是

相对于其最近的滚动祖先 https://developer.mozilla.org/en-美国/docs/web/css/position

它是什么。

两个选项

1.在上，您可以使用代替粘滞:

@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;
  }
}

2。或者在上面移动，这样会影响元素:

@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;
  }
}