Блог

Главная - Вопросы по программированию - Как создать панель навигации, которая отклеивается после прокрутки до заданного значения?

Как создать панель навигации, которая отклеивается после прокрутки до заданного значения?

#javascript #jquery #css #navbar

#javascript #jquery #css #панель навигации

Вопрос:

У меня есть панель навигации, которая в настоящее время прилипает к верхней части экрана, когда я прокручиваю страницу до конца. В идеале я хочу, чтобы она отклеивалась после достижения нижней части элемента canvas, который образует верхнюю половину страницы, а затем возвращалась со страницей, если она прокручивается обратно.

Я попробовал пару поисковых запросов и думаю, что, вероятно, смогу сделать это с помощью 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="imagesGitHub-Mark-64px.png" alt=""> </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="imagesemail.png" alt=""></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="imagesNYC-Pic.jpg" alt="" />
    </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

Комментарии:

1. Спасибо! Я попробую это сегодня

Метки: ,