Get element by scroll position-CodePudding

There is a simple page with a bunch of elements stacked vertically, for example:

.container {
  display: flex;
  flex-direction: column;
}
.container > * {
  margin-bottom: 10px;
  display: block;
}
img {
  width: 300px;
  height: auto;
}

<div >
  <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>

I need to find an element at specific scroll position, so it looks like this:

function getElementByScrollPosition(yPosition) {
  // ...
  return element;
}

getElementByScrollPosition(600); // get element at 600 scrollY (or offsetTop)

My question is, how to do this efficiently? My current plan is to loop through every element of the page and getBoundingClientRect() each. Then compare position of each item. Is there a better way?

CodePudding user response：

You could use js document.elementFromPoint()

Check more here:

The elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport).

Example:

console.log(document.elementFromPoint(300,150));

.container {
  display: flex;
  flex-direction: column;
}
.container > * {
  margin-bottom: 10px;
  display: block;
}
img {
  width: 300px;
  height: auto;
}

<div >
  <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>

CodePudding user response：

Are you looking for something like this?

$(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 >
  <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>

In this example, you can show and hide a specific element if you scroll more or less than 100px. If you want it more automatized, I would recommend you for example Sal.