Tengo un bloque ubicado y arreglado a la derecha de la página pero hay un problema. Cuando llega al pie de página, necesito que se detenga allí; de lo contrario, en algunos tamaños, subirá al pie de página, lo que no debería suceder.
Es importante que la altura de la página pueda ser diferente, tal vez 3500 px, tal vez 4500 px.
¿Es posible en el script hacer que este bloque se detenga de alguna manera, digamos, 300 px desde el final de la página, es decir, desde el pie de página?
const navShareLink = document.getElementById('navShareLink'); document.addEventListener('scroll', function(e) { if (window.scrollY > 1000 && window.innerWidth > 576) { navShareLink.style.display = "block"; } else { navShareLink.style.display = "none"; } }); .sidemenu-shares { z-index: 999; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; position: fixed; top: 0; right: 0; flex-wrap: nowrap; gap: 40px; } .rectangle { z-index: 998; transition: opacity 0.5s; padding: 5px; height: 216px; width: 48px; background-color: rgba(0, 0, 0, 0.1); border-radius: 24px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="sidemenu-shares"> <div id="navShareLink" class="rectangle" style="display: none"> </div> </div>Coloque el bloque de la barra lateral en un elemento que encierra el contenido de la página principal, con el pie de página fuera de ese elemento. A continuación, utilice el posicionamiento sticky .
/* The important part: */ .sidebar { float: right; position: sticky; top: 8px; /* This should match the top margin/padding on the body */ } /* Cosmetics for the demo: */ .main-content { min-height: 200vh; } .main-content p:first-of-type { margin-top: 0; } .sidebar { width: 25vw; min-height: 25vh; background-color: #a00; } footer { min-height: 100vh; background-color: #eee; } html { margin: 0; padding: 0; } body { margin: 0; padding: 8px; } <div class="main-content"> <div class="sidebar"> Sidebar... </div> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> </div> <footer> Footer... </footer>