如何让导航栏在滚动到设定点后松开？

Posted 2023-05-08

技术标签:

【中文标题】如何让导航栏在滚动到设定点后松开？【英文标题】：How to have a Navbar that unsticks after scrolling to a set point? 【发布时间】：2022-01-07 11:13:36 【问题描述】：

我有一个导航栏，当我一直向下滚动页面时，它当前会粘在屏幕顶部。理想情况下，我希望它在到达构成页面上半部分的画布元素的底部后松开，然后在页面向上滚动时返回页面。

我已经尝试了几次搜索，我想我可能可以使用 jQuery 来完成，但我对它很陌生，不知道从哪里开始。任何帮助表示赞赏！

html

<nav class="navbar navbar-expand-md navbar-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand abs" href="#">Donald Barr</a>
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapseNavbar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="https://github.com/db1692"> <img class="logos" src="images\GitHub-Mark-64px.png" > </a>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="mailto: x" data-bs-target="#myModal" data-bs-toggle="modal"><img class="logos" src="images\email.png" ></a>
        </li>
      </ul>
    </div>
  </div>
</nav>


<body>
  <canvas id="canvas"></canvas>  
  <div class="splash-wrapper">    **This is where I want the navbar to stop**
    <div class="splash-content">
      <img class="headshot faded" src="images\NYC-Pic.jpg"  />
    </div>
    <div class="splash-text">
      <h1 class="faded"></h1>
    </div>
    <div class="splash-text">
      <p class="faded">Filler text here</p>
    </div>

.navbar 
  background: rgba(0, 0, 0, 0.4);
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  top: 0;
  width: 100%;
  height: 50px;
  margin: auto;
  text-align: center;


.navbar-brand 
  font-size: 1em;
  padding-right: 13px;


@media (min-width: 768px) 
  .navbar-brand.abs 
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  


.logos 
  max-width: 35px;

【问题讨论】：

【参考方案1】：

您可以使用 onscroll 事件处理程序来检查滚动位置并在需要时取消粘贴导航栏。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll

https://www.w3schools.com/jsref/event_onscroll.asp

【讨论】：

谢谢！我今天就试试这个

以上是关于如何让导航栏在滚动到设定点后松开？的主要内容，如果未能解决你的问题，请参考以下文章

如何使我的导航栏在滚动时变为半透明？

为啥我的导航栏在向下滚动时不隐藏而在向上滚动时出现？