我一直在沮丧地尝试让“粘性”CSS 属性在我的导航栏上工作，但不知道如何实现。一开始我以为是flexbox的问题，所以我把它全部去掉了，还是不行。然后我认为这可能是一个子父问题，但在以这种方式排除故障后仍然无法使其工作。我也不想使用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>最佳答案
将粘性代码添加到 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>关于html - 无法让 "position: sticky"在我的导航栏上工作。任何帮助表示赞赏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69420278/