滾動頁面時阻止我的側導航欄滾動到我的主導航

我有兩個元素要粘在頂部的導航欄和側面的導航欄上。當我向下滾動頁面時，我的側導航欄會向上進入我的導航欄。https://imgur.com/a/k39Cruu。我想讓我的導航欄隨著頁面向下滾動，同時讓我的側欄向下滾動但不進入我的導航欄。

https://prod.liveshare.vsengsaas.visualstudio.com/join?E54AB60203B903B84F7B99C3978743CD838A

HTML

 <div class="sticky-div">
<div class="top-nav">
  <header>

    <ul class="darkgray-box">

      <li class="tablet"><a href="#" target="_blank">Home</a></li>
      <li class="tablet"><a href="#" target="_blank">About</a></li>
      <li class="tablet"><a href="#" target="_blank">Gallery</a></li>
      <li class="tablet"><a href="#" target="_blank">Calendar</a></li>
      <li class="tablet"><a href="#" target="_blank">Contact</a></li>

    </ul>
    </nav>

            <nav class="social-nav">
<a class="facebook" href="https://facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
      <a class="twitter" href="https://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      <a class="instagram" href="https://instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    </nav>
  </header>
</div>

  <main>
    <nav class="animal-nav">
      <ul class="gray-box">
        <li>FENNEC FOX</li>
        <hr>
        <li>LLAMA</li>
        <hr>
        <li>MANED WOLF</li>
        <hr>
        <li>PANGOLIN</li>
        <hr>
        <li>PYGMY MARMOSET</li>
        <hr>
        <li>RED PANDA</li>
        <hr>
      </ul>
    </nav>




  

CSS

     .main-background {  
    display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 30px 30px; 

}

.link1{

    margin-top: 90px;


}

.link2{

    margin-top: 32px;

}

.link3{

    margin-top: 71px;
}



.link6{

    margin-top: 54px;
}

.bottom-nav{
   width: auto;
}

.animal-nav{
float: right;
margin: 10px;
height: 270vh;
background-color: white;




}



.gray-box{

position: sticky;
top: 0px;
background-color: lightgray;
padding: 10px;

}



.sticky-div{
position: sticky;
top: 0;
}



}

uj5u.com熱心網友回復：

將位置更改為固定并嘗試一下

uj5u.com熱心網友回復：

也許你可以試試這個。我注意到您的一些 html 已關閉，因此我將其重新定位到它所屬的位置。讓我知道這是否適合您。以全屏方式查看它。

.main-background {  
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  grid-gap: 30px 30px; 

}

.link1{
    margin-top: 90px;
}

.link2{
    margin-top: 32px;
}

.link3{
    margin-top: 71px;
}

.link6{
    margin-top: 54px;
}

.bottom-nav{
   width: auto;
}

.animal-nav{
float: right;
margin: 10px;
height: 270vh;
background-color: white;

}

.gray-box{
position: sticky;
top: 0;
background-color: lightgray;
padding: 10px;
}


.sticky-div{
position: fixed;
top: 0;

}

<div class="top-nav">
<div class="sticky-div"> 
  <header>

    <ul class="darkgray-box">

      <li class="tablet"><a href="#" target="_blank">Home</a></li>
      <li class="tablet"><a href="#" target="_blank">About</a></li>
      <li class="tablet"><a href="#" target="_blank">Gallery</a></li>
      <li class="tablet"><a href="#" target="_blank">Calendar</a></li>
      <li class="tablet"><a href="#" target="_blank">Contact</a></li>

    </ul>
   

            <nav class="social-nav">
<a class="facebook" href="https://facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
      <a class="twitter" href="https://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      <a class="instagram" href="https://instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    </nav>
  </header>
</div>
  <main>
    <nav class="animal-nav">
      <ul class="gray-box">
        <li>FENNEC FOX</li>
        <hr>
        <li>LLAMA</li>
        <hr>
        <li>MANED WOLF</li>
        <hr>
        <li>PANGOLIN</li>
        <hr>
        <li>PYGMY MARMOSET</li>
        <hr>
        <li>RED PANDA</li>
        <hr>
      </ul>
    </nav>

uj5u.com熱心網友回復：

替換此樣式

.animal-nav{
float: right;
margin: 10px;
height: 270vh;
position:fixed;
right:20px;
top:100px;
background-color: white;
}

標籤：html css

上一篇：如何使用display:flex回應包含在父級中的<img>？

下一篇：如何將一個元素懸停在ul串列中而其他元素消失？