导航栏不固定，

时间：2020-09-10 18:56:02

标签： html css position css-position

我在移动视图上有一个固定的导航栏，该站点在水平方向上滚动。相同的代码在另一个具有几乎相同的div结构的html页面中工作。我在此页面中有一个主要问题-固定的nav容器在第一页之后（有时在第二页部分或“ #about”之后）未修复。我尝试在导航的html中添加“已修复”，但仍无法正常工作。 enter image description here enter image description here 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;
}

2 个答案:

答案 0 :(得分：0)

如果我正确地回答了您的问题，那么您要做的就是：

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

您必须基本上给出顶部，底部，左侧或右侧的边距，而不是0。

答案 1 :(得分：0)

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

.nav-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}
相关问题
最新问题