Hay una página simple con un montón de elementos apilados verticalmente, por ejemplo:
.container { display: flex; flex-direction: column; } .container > * { margin-bottom: 10px; display: block; } img { width: 300px; height: auto; } <div class="container"> <h1>Some title</h1> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <p>Lorem ips dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cill dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est labor.</p> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <h1>Another title</h1> <p>Another random content</p> <img src="https://dummyimage.com/600x400/000/fff" /> </div>Necesito encontrar un elemento en una posición de desplazamiento específica, por lo que se ve así:
function getElementByScrollPosition(yPosition) { // ... return element; } getElementByScrollPosition(600); // get element at 600 scrollY (or offsetTop) Mi pregunta es, ¿cómo hacer esto de manera eficiente? Mi plan actual es recorrer cada elemento de la página y getBoundingClientRect() cada uno. Luego compare la posición de cada elemento. ¿Hay una mejor manera?
Podrías usar js document.elementFromPoint()
Consulta más aquí :
El método elementFromPoint(), disponible en el objeto Documento, devuelve el elemento superior en las coordenadas especificadas (en relación con la ventana gráfica).
Ejemplo:
console.log(document.elementFromPoint(300,150)); .container { display: flex; flex-direction: column; } .container > * { margin-bottom: 10px; display: block; } img { width: 300px; height: auto; } <div class="container"> <h1>Some title</h1> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <p>Lorem ips dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cill dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est labor.</p> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <h1>Another title</h1> <p>Another random content</p> <img src="https://dummyimage.com/600x400/000/fff" /> </div>¿Estás buscando algo como esto?
$(document).ready(function() { $(window).scroll(function() { if ($(document).scrollTop() > 100) { $('#element').fadeIn(); } else { $('#element').fadeOut(); } }); }); .container { display: flex; flex-direction: column; } .container>* { margin-bottom: 10px; display: block; } img { width: 300px; height: auto; } #element { background-color: yellow; position: sticky; top: 0; display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="element">This gets displayed after 100px of scrolling</div> <div class="container"> <h1>Some title</h1> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <p>Lorem ips dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cill dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est labor.</p> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <h1>Another title</h1> <p>Another random content</p> <img src="https://dummyimage.com/600x400/000/fff" /> </div> En este ejemplo, puede mostrar y ocultar un elemento específico si se desplaza más o menos de 100px . Si lo quieres más automatizado te recomendaría por ejemplo Sal .