0
147
Views¿Cómo coloco un elemento en el medio de una página y luego lo hago pegajoso y voy al principio?
Estoy tratando de colocar una barra de búsqueda en el medio de la página, no hay elementos encima, pero cuando estamos a punto de pasarla, quiero que se mantenga en la parte superior de la página.
La aplicación web se está desarrollando con REACT, no se permite usar JQuery.
Ejemplo:
Al abrir el sitio web, esta es la posición en la que debe estar
Desplazando hacia abajo:
Cuando la barra de búsqueda llega a la parte superior, se adhiere a ella:
Aquí hay un poco de lo que he probado:
.searchLink { flex-grow: 1; margin: 11px auto 11px auto; border-left-style: solid; border-left-width: 1px; border-left-color: var(--matterColorNegative); border: 1px solid #dddddd; border-radius: 50px; height: 50px; background-color: #ffffff; position: sticky; top: 0px; justify-content: center; @media (--viewportLarge) { max-width: 700px; padding-left: 0; }No estoy seguro de cómo colocarlo en el medio de la página sin ningún elemento encima. El resultado del código actual hace que la barra de búsqueda aparezca en la parte superior de la página.
Soy un nuevo desarrollador web, estoy aprendiendo CSS. Por favor guíame.
2 answers
Answer question0
Podrías probar algo como esto con un poco de código jquery
window.addEventListener('load', function(){ var dinamicHeight = (window.innerHeight/2) - document.getElementById("myStickyBar").offsetHeight; document.getElementById("myMargin").style.height = dinamicHeight + "px"; }, false ); #myStickyBar { height: 50px; width: 100%; background-color: red; position: sticky; top: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="height: 700px; width:100%;"> <div id="myMargin"></div> <div id="myStickyBar" style=""> </div> </div>0
Tendrá que usar JavaScript para ver si se desplazó más allá del elemento. Una posible implementación podría verse así:
<script> let initialPosition = null; window.addEventListener('scroll', (e) => { const searchbar = document.querySelector('.seachbar'); if (initialPosition && (window.scrollY < initialPosition)) { searchbar.classList.remove('sticky-top'); } else if (window.scrollY > (searchbar.offsetTop - searchbar.offsetHeight)) { if (!initialPosition) { initialPosition = searchbar.offsetTop - searchbar.offsetHeight; } searchbar.classList.add('sticky-top'); } }); </script>Debe verificar si se ha desplazado más allá del elemento cada vez que se desplaza, por lo que debe adjuntar un detector de eventos al evento de desplazamiento de la ventana. Luego puede usar "window.scrollY" para verificar cuánto se desplazó el usuario hacia abajo y compararlo con el desplazamiento del elemento desde la parte superior de la página "element.offsetTop" y la altura del elemento "element.offsetHeight".
Entonces es simplemente una cuestión de agregar/eliminar una clase CSS al elemento con "posición: fija".
Tendrá que ajustar los selectores para que coincidan con su código, para esta implementación utilicé este ejemplo de CSS y HTML:
<style> * { margin: 0; padding: 0; } .search-container { display: flex; justify-content: center; align-items: flex-end; height: calc(50vh - 50px); } .seachbar { width: 500px; height: 50px; border: 1px solid black; } .sticky-top { position: fixed; top: 25px; } .other-content { height: 100vh; } </style> <div class="search-container"> <div class="seachbar"> Search </div> </div> <div class="other-content"></div>