我想讓導航欄變粘

我想讓這個導航欄保持粘性，在應用下面的 css 之后，它對于一頁的行為就像是粘性的，但是當我滾動更多時它會上升并且不會像粘性一樣。請幫我解決這個問題。

粘性導航欄一直滾動到標題內容，但在滾動超出標題后它會向上并隱藏。

    #header {
      width: 100%;
      height: 100vh;
      background-image: url(/img/pp-desktop.png);
      background-size: cover;
      background-position: center;
    }

    .container {
      padding: 10px 10%;
    }

    .logo {
      width: 80px;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
/* From here I added CSS for sticky behaviour....*/
      align-self: flex-start;
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      z-index: 1;
    }

    nav ul li {
      display: inline-block;
      list-style: none;
      margin: 10px 20px;
    }


Sticky navbar works scrolling till header content but after scrolling beyond header it goes up and hide.

<div id="header">
    <div class="container">

        <nav>
            <img src="/img/logo.png" class="logo" alt="" />
            <ul id="sidemenu">
                <li><a href="#header">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
                <i class="fa-solid fa-square-xmark" onclick="closeMenu()"></i>
            </ul>
            <i class="fa-solid fa-bars" onclick="openMenu()"></i>
        </nav>

        <div class="header-text">
            <p>Software Developer</p>
            <h1>Hi, I am <span>xyz</span> </br> from India</h1>
        </div>

    </div>
</div>



<div id="about">

    <div class="container">

        <div class="row">
            <div class="about-col-1">
                <img src="/img/me.png" alt="">
            </div>
            <div class="about-col-2">
                <h1 class="sub-title">About Me</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
                    aspernatur earum tempora, adipisci consequatur ea temporibus quidem animi excepturi
                    est assumenda, eius debitis et deleniti accusamus reprehenderit deserunt labore!
                    Repellendus magnam cumque commodi corporis cum vel architecto sed. Quam laudantium
                    possimus doloribus cumque voluptatum placeat vero aut non libero a?</p>
                <div class="tab-titles">
                    <p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
                    <p class="tab-links" onclick="opentab('experience')">Experience</p>
                    <p class="tab-links" onclick="opentab('education')">Education</p>
                </div>

                <div class="tab-contents active-tab" id="skills">
                    <ul>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                    </ul>
                </div>

                <div class="tab-contents" id="experience">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>

                <div class="tab-contents" id="education">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>

            </div>
        </div>

    </div>

</div>

uj5u.com熱心網友回復：

sticky因此，您可能會對和的用例感到困惑fixed。

• fixed位置內容永遠不會離開視口，并且始終可見
• sticky當父級滾動出視口時，位置背景關系離開視口。

因此，.header滾動出視圖并且導航隨之消失。

在你的情況下：

nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      align-self: flex-start;
      position: fixed;
      top: 0;
      z-index: 1;
    }

這應該可以解決問題。如果您希望每個容器有多個標題，您可以使用sticky. 我希望這有幫助！

標籤：javascript html css 弹性盒 CSS位置

上一篇：如何控制兩個組件之間的鉤子

下一篇：如何在reactjs中使用axios發送firebasegetIdToken？