我想让导航栏变粘

Question

我想让这个导航栏变粘，在应用下面的 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>

Answer 1

因此，您可能会混淆 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。 我希望这有帮助！

Answer 2

所以你想创建一个 sticky 或 fixed 导航栏，好的，这并不难。我会给你一个源代码的例子。让我们试试下面的代码。

源代码：Sticky Navbar

例子： 1] 使用 HTML

 <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

2]使用CSS

    nav {
      top: 0;
      width: 100%;
      background-color: #333;
      color: #fff;
      padding: 20px;
    }
    
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
    }
    
    nav ul li {
      margin: 0 10px;
    }
    
    nav ul li a {
      color: #fff;
      text-decoration: none;
    }
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      right: 0;
    }

   .sticky + .content {
      padding-top: 60px;
   }

3] 使用JavaScript

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

var navbar = document.querySelector("nav");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

这将帮助您创建粘性导航栏。