位置粘性属性在html中不起作用答案

【问题标题】：position sticky property not working in html位置粘性属性在html中不起作用
【发布时间】：2021-08-17 12:25:51
【问题描述】：

position: sticky 在我的代码中不起作用

我尝试了不同的属性，但似乎没有任何效果

codepen：https://codepen.io/iabzeet/pen/qBmGyLb

帮我解决这个问题

#title{
    font-family: 'Inknut Antiqua', sans-serif;
    color: rgb(243, 30, 112);
    font-size: 12px;
    position: relative;
    top: 24px;
    display: flex;
    flex-direction: row;
}

.logo{
    width: 4%;
    position: relative;
    top: 20px;
    display: flex;
    flex-direction: row;
}
 .top-container {
    padding: 60px 30px 30px 30px;
    margin: -80px -6px 0px -30px;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    position: relative;
    background-image: linear-gradient(-45deg,blue,white,yellow);
  } 



body{
  box-sizing: border-box;
}



#header-img{
  width: 3%;
  padding: 0;
  display: flex;
  position: relative;
  top: 2px;
}
nav {
  position: sticky;
  top: 0;
  
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 20%;
    background-color: #333;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  li {
    list-style: none;
    margin-right: 70px;
    font-size: 25px;
    font-weight: bold;

  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 3px 10px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #04AA6D;
    border-radius: 5px;
  }

ul {
    list-style-type: none;
    margin: -48px -6px 0px -10px;
    padding: 9px;
    display: flex;
    flex-direction: row;
  }


#cover{

    margin: 0.5px -10px 0px -10px;
    position: fixed;
    top: 0px;
    display: grid;
    width: 100%;
    margin-right: -98px;
    height: 550px;
    object-fit: cover;
    align-self: center;
    z-index: -1;
    opacity: 0.8;
}


.container {
    height: 100%;
    padding: 0.01em 16px;
    padding-top: 0.01em;
    padding-right: 0px;
    padding-bottom: 0.01em;
    padding-left: 0px;
    display: grid;
    position: relative;
    justify-items: center;

}
#sml{
  position: absolute;
  display: grid;
  color: white;
  transform: translate(0px, 150px);
}
#text{
  position: absolute;
  display: grid;
  color: whitesmoke;
  transform: translate(0px, 150px);
  z-index: 2;
  font-size: 50px;
}
.policies{
  margin-top: 0px;
  background-image: whitesmoke;
  display: flex;
  position: relative;
  
}
#prod{
  background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
  margin-right: -7px;
  margin-left: -7px;
  position: absolute;
  top: 390px;
  font-size: large;
}

/* .centered{
    position: absolute;
    color: rgb(228, 56, 56);
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

<!DOCTYPE html>
<html>
<body>

<head>
    <title>Giovanni's Guitars</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300&display=swap"
        type='text/css'>
</head>



    <div class="top-container">
        <img class="logo" src="logo1.svg" alt="a logo">
        <div id="title">
            <h1>Giovanni's Guitars</h1>
        </div>
    </div>
    <header id="header">   
        <img id="header-img" src="logo2.svg" alt="a logo">
   
        <nav id="nav-bar">

            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
              <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
          </nav>
    

    </header> 

<div class="container">
    
    <video autoplay muted loop id="cover">
        <source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
    </video>

    <p id="sml">Since 1961</p>
    <div id="text">
        <h4>Guitars and Basses.</h4>
    </div>
</div>

<section class="policies">
    <h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>

</body>


</html>

【问题讨论】：

您能否将代码中的标签移到结束标签下方？这将有助于创建更好的文档结构。
粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。 Source Mozilla

标签： html css

【解决方案1】：

参考：https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

工作演示：https://codepen.io/shalinimandal/pen/dyWEgpg

在您的代码中添加以下 CSS：

nav {
  z-index: 10;
  
}
.sticky {
  position: fixed;
  top: 50px;
  width: 100%;
}

添加此 Javascript 代码以在滚动条上添加粘性类

window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("nav-bar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

【讨论】：

感谢您的回复。没有任何javascript就不能完成吗？虽然我能看懂代码但我对 js 还不熟悉
如果我们想在没有 JS 的情况下这样做，那么导航栏将始终粘在 top:0。所以，我们不能在 nav 之前有任何其他元素。它必须是页面上的第一个元素。检查参考 - stackoverflow.com/questions/63458661/…
查看 MaxiGui 的答案（代码）。如果没有 js 的粘性部分，它似乎可以按我的意愿工作。但我会用你的 js 因为我想要那种视差效果

【解决方案2】：

您可以尝试从#cover 中删除position: fixed 和从#prod 中删除position: absolute

#title{
    font-family: 'Inknut Antiqua', sans-serif;
    color: rgb(243, 30, 112);
    font-size: 12px;
    position: relative;
    top: 24px;
    display: flex;
    flex-direction: row;
}

.logo{
    width: 4%;
    position: relative;
    top: 20px;
    display: flex;
    flex-direction: row;
}
 .top-container {
    padding: 60px 30px 30px 30px;
    margin: -80px -6px 0px -30px;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    position: relative;
    background-image: linear-gradient(-45deg,blue,white,yellow);
  } 



body{
  box-sizing: border-box;
}

body, header, .container {
display:initial;
}

#header-img{
  width: 3%;
  padding: 0;
  display: flex;
  position: relative;
  top: 2px;
}
nav {
  position: sticky;
  top: 0;
  position: -webkit-sticky;
  z-index: 10;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 20%;
    background-color: #333;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  li {
    list-style: none;
    margin-right: 70px;
    font-size: 25px;
    font-weight: bold;

  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 3px 10px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #04AA6D;
    border-radius: 5px;
  }

ul {
    list-style-type: none;
    margin: -48px -6px 0px -10px;
    padding: 9px;
    display: flex;
    flex-direction: row;
  }


#cover{

    margin: 0.5px -10px 0px -10px;
    /*position: fixed;*/
    top: 0px;
    display: grid;
    width: 100%;
    margin-right: -98px;
    height: 550px;
    object-fit: cover;
    align-self: center;
    z-index: -1;
    opacity: 0.8;
}


.container {
    height: 100%;
    padding: 0.01em 16px;
    padding-top: 0.01em;
    padding-right: 0px;
    padding-bottom: 0.01em;
    padding-left: 0px;
    display: grid;
    position: relative;
    justify-items: center;

}
#sml{
  position: absolute;
  display: grid;
  color: white;
  transform: translate(0px, 150px);
}
#text{
  position: absolute;
  display: grid;
  color: whitesmoke;
  transform: translate(0px, 150px);
  z-index: 2;
  font-size: 50px;
}
.policies{
  margin-top: 0px;
  background-image: whitesmoke;
  display: flex;
  position: relative;
  
}
#prod{
  background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
  margin-right: -7px;
  margin-left: -7px;
  /*position: absolute;*/
  top: 390px;
  font-size: large;
}

/* .centered{
    position: absolute;
    color: rgb(228, 56, 56);
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

<body>




    <div class="top-container">
        <img class="logo" src="logo1.svg" alt="a logo">
        <div id="title">
            <h1>Giovanni's Guitars</h1>
        </div>
    </div>
    <header id="header">   
        <img id="header-img" src="logo2.svg" alt="a logo">
   
        <nav id="nav-bar">

            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
              <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
          </nav>
    

    </header> 

<div class="container">
    
    <video autoplay muted loop id="cover">
        <source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
    </video>

    <p id="sml">Since 1961</p>
    <div id="text">
        <h4>Guitars and Basses.</h4>
    </div>
</div>

<section class="policies">
    <h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio 
    </h5>
    </section>
    </body>

【讨论】：

【解决方案3】：

我认为position: sticky 不像你想象的那样工作。带有position: sticky 的元素只有在其父元素可见时才会“卡住”。在您的情况下，nav 父级是 header，header 的高度与 nav 大致相同。

换句话说，如果你想要一个元素被粘住，它必须是你正在滚动到的元素的子元素。

在您的情况下的问题是，如此多的元素在最后以absolute 或fixed 定位，您的正文与标题具有相同的高度，这意味着没有溢出和“粘性”

我的建议是尽可能重新开始，避免使用position: absolute 或position: fixed 进行布局（我通常推荐display: grid，但当我看到最终结果时display: block 应该这样做）并将position: sticky 应用于标题

【讨论】：

【解决方案4】：

正如我在评论您的问题时所说：

粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。 Source Mozilla

它确实完全解决了你的问题：

首先我从标题中取出nav 以使position:sticky 工作，因为在这种情况下，如果它不在正文下方，它将无法工作。
其次，我刚刚在您的 #cover 上评论了您的 position:fixed，以显示它可以在哪里工作，否则它将始终按照文档取消您的置顶
第三次我在你的nav 上添加了z-index:1000; /* ADDED */
.policies 和 #prod 上的第四个评论位置

现在您只需要正确对齐您的视频，因为它似乎无缘无故地有很多不同的边距

演示：

#title{
    font-family: 'Inknut Antiqua', sans-serif;
    color: rgb(243, 30, 112);
    font-size: 12px;
    position: relative;
    top: 24px;
    display: flex;
    flex-direction: row;
}

.logo{
    width: 4%;
    position: relative;
    top: 20px;
    display: flex;
    flex-direction: row;
}
 .top-container {
    padding: 60px 30px 30px 30px;
    margin: -80px -6px 0px -30px;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    position: relative;
    background-image: linear-gradient(-45deg,blue,white,yellow);
  } 



body{
  box-sizing: border-box;
}



#header-img{
  width: 3%;
  padding: 0;
  display: flex;
  position: relative;
  top: 2px;
}
nav {
  position: sticky;
  top: 0;
  
  z-index:1000; /* ADDED */
  
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 20%;
    background-color: #333;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  li {
    list-style: none;
    margin-right: 70px;
    font-size: 25px;
    font-weight: bold;

  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 3px 10px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #04AA6D;
    border-radius: 5px;
  }

ul {
    list-style-type: none;
    margin: -48px -6px 0px -10px;
    padding: 9px;
    display: flex;
    flex-direction: row;
  }


#cover{

    margin: 0.5px -10px 0px -10px;
    /*position: fixed;*/
    top: 0px;
    display: grid;
    width: 100%;
    margin-right: -98px;
    height: 550px;
    object-fit: cover;
    align-self: center;
    z-index: -1;
    opacity: 0.8;
}


.container {
    height: 100%;
    padding: 0.01em 16px;
    padding-top: 0.01em;
    padding-right: 0px;
    padding-bottom: 0.01em;
    padding-left: 0px;
    display: grid;
    position: relative;
    justify-items: center;

}
#sml{
  position: absolute;
  display: grid;
  color: white;
  transform: translate(0px, 150px);
}
#text{
  position: absolute;
  display: grid;
  color: whitesmoke;
  transform: translate(0px, 150px);
  z-index: 2;
  font-size: 50px;
}
.policies{
  margin-top: 0px;
  background-image: whitesmoke;
  display: flex;
  /*position: relative;*/
  
}
#prod{
  background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
  margin-right: -7px;
  margin-left: -7px;
  /*position: absolute;*/
  top: 390px;
  font-size: large;
}

/* .centered{
    position: absolute;
    color: rgb(228, 56, 56);
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

<!DOCTYPE html>
<html>
<body>

<head>
    <title>Giovanni's Guitars</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300&display=swap"
        type='text/css'>
</head>



    <div class="top-container">
        <img class="logo" src="logo1.svg" alt="a logo">
        <div id="title">
            <h1>Giovanni's Guitars</h1>
        </div>
    </div>
    <header id="header">   
        <img id="header-img" src="logo2.svg" alt="a logo">
   
        

    </header> 
    <nav id="nav-bar">

            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
              <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
          </nav>
    
<div class="container">
    
    <video autoplay muted loop id="cover">
        <source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
    </video>

    <p id="sml">Since 1961</p>
    <div id="text">
        <h4>Guitars and Basses.</h4>
    </div>
</div>

<section class="policies">
    <h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>

</body>


</html>

【讨论】：

为什么nav滚动后会跟着空白处移动？？
@Parvat.R 这是由于.policies 块上的位置类型
谢谢。但我希望视频在文本滚动时固定在背景中。我知道这要求太多，但你能告诉我怎么做吗
@Abhijeet 您想在滚动时将视频放在section.policies 后面吗？（如果是，则此部分应与视频在同一部分）
我会试试的

【解决方案5】：

我测试了一下，我认为问题不在于粘性位置，而在于您的导航在 html 中的位置。

如果你把它移到标题之外，你会发现它已经有点粘住了。问题是它只能粘在容器的顶部，只要它不接触容器的底部。所以容器的高度应该更大，以便您导航能够移动。

【讨论】：

【解决方案6】：

您能否添加更多详细信息，说明您希望所需设计的行为方式。

您希望导航栏在到达页面顶部时停止吗？如果是这样，您可能需要一些 JavaScript。在这种情况下，这可能是您正在寻找的... https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

如果您只是希望导航栏保持原位，而页面的其余部分在其后面移动，那么试试这个...

nav {
  position: fixed;
}

【讨论】：

我没有投反对票，但我想这是因为他希望导航栏在页面开始时距离顶部 200px，然后当它到达导航栏时它应该保持在顶部浏览器的，但这是方式，这肯定行不通，特别是如果你只是修改你的位置，导航栏就会消失，因为它是top:0。所以不行，复制问题中的sn-p试试，你会看到...
@fatchild 抱歉，我对答案投了反对票，但忘了添加评论。我投反对票的原因是 position: fixed 自己（没有进一步的 js 或 css）只会将导航栏放在页面顶部。问题在于有这么多元素是位置固定或绝对的，这使得页面高度（就导航元素而言）太小而无法粘贴。