导航栏不固定，

Question

我在移动视图上有一个固定的导航栏，该网站是水平滚动的。相同的代码在另一个具有几乎相同 div 结构的 html 页面中工作。我在这个页面中有一个主要问题 - 固定导航容器在第一页之后没有修复，有时在第二页部分或“#about.我尝试在导航的 html 中添加“固定”，但它仍然无法正常工作。 HTML

 <nav class="nav-container">
<div class="mobile__header-controls" style="position: fixed">
            <div class="mobile__nav">
               <button class="mobile__more">+</button>
               <div class="mobile__process-nav">
                  <a href="#show" data-tab-target="#show" class="mobile__tab">Show</a>
                  <a href="#about" data-tab-target="#about" class="mobile__tab">About</a>
                  <a href="#researchFilm-ba" data-tab-target="#researchFilm-ba" class="mobile__tab">Research Film</a>
                  <a href="#stills-ba" data-tab-target="#stills-ba" class="mobile__tab">Stills</a>
                  <a href="#lookbook" data-tab-target="#lookbook" class="mobile__tab">Lookbook</a>
               </div>
               <div class="mobile__main-nav">
                  <a class="mabtn" style="text-decoration: underline;" href="/MA.html">MA</a>
                  <a class="capbtn" href="/capsule.html">Capsule</a>
                  <a class="babtn" href="/BA.html">BA</a>
               </div>
            </div>
            <a href="/index.html" class="info-back">Back</a>
         </div>
</nav>

<main>
      <div class="tab-content animate__animated animate__fadeIn">
         <div id="show" data-tab-content>
            <div class="video-wrapper">
               <video id="catwalk" playsinline autoplay loop preload="metadata">
                  <source src="/img/BA/Samson Leung Dear you, he said - CSM BA Fashion.mp4" type="video/mp4">
               </video>
            </div>
         </div>

         <div id="about" data-tab-content>
            <div class="about-text black-text">
               <div class="proj-header fade-in">

                  <p><b>
                        I realise i didn’t had the luxury of creating a home video as a kid, hence I wanted to
                        use this opportunity to present my collection in the form of a film.
                     </b>
                  </p>
               </div>
               <div class="about-body">
                  <p class="fade-in">
                     Based on the feeling of overwhelmed, I redirected the emotion into a mood film I shot in Japan
                     named <b>“Dear You”</b>. My project follows the sequel, a second narrative film shot in Hong
                     Kong
                     named
                     “Paper Boys” which follows a “paper” boy who felt overwhelmed and decided to leave his life
                     behind, however after reaching the epiphany (explosion), he realises in the end that he is still
                     very much a papery boy at heart. Collaborated with friends at the Royal College of Music, we
                     composed a poetic soundtrack specifically for my body of work. These films serve as a form of a
                     self portraiture.
                  </p>

                  <p class="fade-in">
                     In traditional Chinese self portraiture, Shan Shui painting or geology were used
                     as a form of metaphor of self reflection, hence being inspired by He Jian Chen’s paintings of
                     rock,
                     it provides the mood I wanted to achieve within the plot. With the inspiration of the granular
                     texture from the film, as well as surface texture of the rock, I develop my own material: slime,
                     a
                     malleable material that when cool, stays stiff and when it’s steamed, it’s soft as leather
                     and can be mould and stitched.

                  </p>

                  <p class="fade-in">
                     Texture and grain was explored through several textile techniques, screen printing and spray
                     paints in order to achieve the gradual change in grains and texture within the collection. I
                     also
                     developed an oil paint print transfer technique that allows me to build layers of colours and
                     opacity and transfer onto the surface any fabric as well as my slime. Although the collection is
                     mostly worn by men, it primarily focuses on women’s garment details.<br><br>
                     I hope that as the model walks down the runway, when they are photographed or
                     filmed, the image will present itself as a still from the “film.” Hence creating a moving film
                     gallery. The catwalk itself results in the third sequel of my film series.
                  </p>
               </div>
            </div>

         </div>

         <div id="researchFilm-ba" data-tab-content>
            <div class="video-wrapper-ba  black-text fade-in">
               <p>Dear You (2017)</p>
               <video class="mood2" loop video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
                  preload="metadata">
                  <source src="/img/BA/dear you,.mp4" type="video/mp4">
               </video>
            </div>
            <div class="video-wrapper-ba black-text fade-in">
               <p>Paper Boys (2018)</p>
               <video class="mood" loop video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
                  preload="metadata">
                  <source src="/img/BA/Paper Boys.mp4" type="video/mp4">
               </video>
            </div>
            <div class="credit-ba">
               <button class="credit-icon">(...)</button>
               <div class="credit-text">
                  <p>
                     Thank you
                     to my team of helpers
                     <br><br>
                     and the following
                     <br><br>
                     Collaborators<br>
                     <br>Film produced with Taka Hata
                     <br>Accessories produced by Kristy Fan
                     <br>Soundtrack composed by Zacharias Wolfe
                     and Friends at Royal College of Music
                     <br><br>
                     Look Book
                     <br>Make Up by Kristina Pavlovic
                     <br>Look Book photographed by Simonas Berukstis
                     <br>Slime Making photographed by Oliver Vanes
                     <br><br>
                     Show
                     <br>Internal Show Make Up by Phoebe Walters
                     <br>Press Show Make Up by Mariko Yamamoto
                     <br>Supported by L’Oréal Professionnel
                     <br><br>
                     Models
                     <br>Yota Hoshi
                     <br>Masato Funaoka
                     <br>Ryan
                     <br>Youtian Zhang
                     <br>Tien Ai Guan
                     <br>Xander Ang
                     <br>Wing Fung
                     <br><br>

                     and the BAFCSM team</p>
               </div>
            </div>
         </div>

         <div id="stills-ba" data-tab-content>
            <div class="stills">
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/01.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/02.jpg" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/03.jpg" alt="still FRONT">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/04.jpg" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/05.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/06.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/07.jpg" alt="still 4">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/08.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/09.jpg" alt="still 5">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/10.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/11.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/12.jpg" alt="still back">
               </div>
            </div>
         </div>

         <div id="lookbook" data-tab-content class="black-text">
            <div class="lookbook-nav">
               <button id="left">←</button>
               <button id="right">→</button>
            </div>
            <div class="lookbook">
               <div class="slider">
                  <img src="/img/BA/lookbook/17.jpg" id="lastClone" alt="">
                  <img src="/img/BA/lookbook/01.jpg">
                  <img src="/img/BA/lookbook/02.jpg">
                  <img src="/img/BA/lookbook/03.jpg">
                  <img src="/img/BA/lookbook/04.jpg">
                  <img src="/img/BA/lookbook/05.jpg">
                  <img src="/img/BA/lookbook/06.jpg">
                  <img src="/img/BA/lookbook/07.jpg">
                  <img src="/img/BA/lookbook/08.jpg">
                  <img src="/img/BA/lookbook/09.jpg">
                  <img src="/img/BA/lookbook/10.jpg">
                  <img src="/img/BA/lookbook/11.jpg">
                  <img src="/img/BA/lookbook/12.jpg">
                  <img src="/img/BA/lookbook/13.jpg">
                  <img src="/img/BA/lookbook/14.jpg">
                  <img src="/img/BA/lookbook/15.jpg">
                  <img src="/img/BA/lookbook/16.jpg">
                  <img src="/img/BA/lookbook/17.jpg">
                  <img src="/img/BA/lookbook/01.jpg" id="firstClone" alt="">
               </div>
            </div>
         </div>
      </div>
   </main>

CSS

.nav-container {
   position: fixed;

}
.mobile__header-controls {
   display: block;
}

.mobile__header-controls a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.5rem;
   text-decoration: none;
   color: black;
   text-transform: uppercase;
   transition: all 1s;
}

.mobile__more {
   font-size: 2rem;
   margin: 2rem;
   font-weight: bold;
   background-color: rgba(255, 255, 255, 0.904)
}

.mobile__process-nav {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   height: 30vh;
   background-color: rgba(255, 255, 255, 0.904);
   color: black;
   border: 2px solid black;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   -moz-transition: opacity 0.3s ease-in-out;
   -webkit-transition: opacity 0.3s ease-in-out;
   -ms-transition: opacity 0.3s ease-in-out;
   -o-transition: opacity 0.3s ease-in-out;
}

.mobile__process-nav.fade {
   opacity: 1;
}

.mobile__process-nav a {
   margin-left: 2rem;
   margin-right: 2rem;
}

.mobile__main-nav {

   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-evenly;
   height: 25vh;
   position: absolute;
   margin-left: 5vw;
   margin-top: 35vh;
   margin-bottom: 0;
}

.mobile__main-nav a {
   background-color: rgba(255, 255, 255, 0.904)
}
.info-back {
   position: absolute;
   margin-left: 80vw;
   margin-top: 53vh;
   margin-bottom: 0;
   background-color: rgba(255, 255, 255, 0.904)
}

/* main {
   background-color: pink;
} */


.tab-content {
   overflow-y: none;
}

.control {
   display: block;
   left: 77vw;
}

#show {
   width:100vw;
   height: 100vh;
}

#about {
   width:100vw;
   height: 100vh;
   overflow: scroll;
}

.proj-header {
   margin-top:3rem;
   padding:0;
   width: 80vw;
   text-align: center;
   /* border: 1px solid black; */
}

.about-text {
   flex-direction: column;
   text-align: none;
   /* overflow: scroll; */
}

.about-text p {
   padding: 1.5rem;
   width: 70vw; 
}

.about-body {
   border: 2px solid black;
   flex-direction: column;
   justify-content: flex-start;
   overflow: scroll;
   height: 50vh;
   padding: 1rem;
   margin-top:0;
   text-align: left;
}


#researchFilm-ba {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}


.video-wrapper-ba {
   width: 90vw;
   margin-right: unset;
   margin-top: 5vw;
   padding: 0;
}

.credit-ba {
   display: flex;
   flex-direction: column;
   position: absolute;
   width: 30vw;
   height: 5vh;
   margin-left: 60vw;
}

.credit-icon {
   margin-top: -9vh; 
   align-self: flex-end;
}
.credit-text {
   background-color:  rgba(255, 255, 255);
   margin-left: -20vh;
}
.credit-text p {
   width: 60vw;
   height: 68vh;
}
#researchFilm p {
   font-size: 1rem;
}

#stills {
   width:100vw;
   overflow: scroll;
}
#stills-ba {
   width:100vw;
   overflow: scroll;
}

.stills {

   width: 100%;
   height: auto;
   flex-direction: column;
   overflow: scroll;
}


.still-wrapper-ba {
   width: 100%;
   height: unset;
}

#lookbook {
   width:100vw;
   height: 100vh;
}

.credit:hover .credit-text {
   display: block;
}

.lookbook-nav {
margin-top: 10vh;
}
.lookbook-nav button {
   font-size: 3rem;
}
.lookbook {
   display: flex;
   justify-content: center;
   align-items:center;
   width: 90.5vw;
}


.slider {
   margin-top: 12vh;
   display: flex;
   width: auto;
   height: 40vh;
}

Answer 1

将其包含在您的 CSS 中 即使您向下滚动网站，这也不会允许导航栏移动

.nav-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

Answer 2

如果我没有正确回答您的问题，您所要做的就是这样做：

.nav-container {
    top: 0;
    position: fixed;

基本上，你必须给出一个顶部、底部、左边或右边距，无论你想要什么距离，而不仅仅是 0。