Tengo una barra de navegación que actualmente se adhiere a la parte superior de la pantalla mientras me desplazo hacia abajo en la página. Idealmente, lo que quiero es que se despegue después de llegar a la parte inferior del elemento del lienzo que forma la mitad superior de la página, y luego vuelva a subir con la página si se ha desplazado hacia arriba.
Probé un par de búsquedas y creo que probablemente pueda hacerlo con jQuery, pero soy bastante nuevo y no estoy seguro de por dónde empezar. ¡Cualquier ayuda apreciada!
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" 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="images\email.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="images\NYC-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; }Puede usar controladores de eventos onscroll para verificar la posición de desplazamiento y despegar la barra de navegación cuando sea necesario.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll