Is there a way to determine the pixels for the top?

Question

I need more of an explanation than anything, but examples are welcomed.
I am trying to make it so when I scroll down a specific element on-screen will fade in on scroll.
The only issue is that I need a way to determine how far down the element in from the top using the code provided (or a better method that would work).
is there a different way to make the scrolling effect work without having to base it off the pixel units from the top?
If not how can you find the distance?
This is the code I've been working with.

if (window.scrollY>300)

Does this answer your question? [How to get the distance from the top for an element?](https://stackoverflow.com/questions/11805955/how-to-get-the-distance-from-the-top-for-an-element) — Jakub A Suplicki, Jun 11 '20 at 22:31
[Element.scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) or maybe [Intersection Observer API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) ? — Roko C. Buljan, Jun 11 '20 at 22:34
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect The Element.getBoundingClientRect() method returns the size of an element **and its position relative to the viewport.** — Mister Jojo, Jun 11 '20 at 22:53

score 1 · Accepted Answer · answered Jun 11 '20 at 22:52

1

Here's a simple example using the Intersection Observer API

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("active", entry.isIntersecting);
  });
};

let observer = new IntersectionObserver(inViewport);
observer.observe(document.querySelector('#box'));

body { height:300vh; }
#box { width:100px; height:100px; position:absolute; top:150vh; background:red; }

/* InViewport transitions */

[data-inviewport="fade-rotate"] { /* Default state */
  transition: 2s;
  opacity: 0.1;
}
[data-inviewport="fade-rotate"].active { /* Active state */
  transform: rotate(180deg);
  opacity: 1;
}

Scroll down...
<div id="box" data-inviewport="fade-rotate"></div>

answered Jun 11 '20 at 22:52

Roko C. Buljan

164,703
32
260
278

Thank you for the link and code. I don't really understand what your code means, but I will read the info from the link and refer back to it when I can. Thank you again!!!! – A.D.Schmidt Jun 11 '20 at 23:09
@A.D.Schmidt The Observer just observes an Element within some boundaries (in the above case it's the *viewport* but you can add another Element if you want, see the DOCS for that or how to add more options). The above basically uses the `entry.isIntersecting` Boolean - to switch a class `"active"` on the observed Element (`entry.target`). The rest is handled by CSS. – Roko C. Buljan Jun 11 '20 at 23:13

score 0 · Answer 2 · answered Jun 11 '20 at 22:54

This will trigger when the element enter the bottom of the page:

if(element.getBoundingClientRect().top <= window.innerHeight)

This will trigger when the element rich the middle of the screen

if(element.getBoundingClientRect().top <= window.innerHeight / 2)

of course all should be on a window onscroll event

Is there a way to determine the pixels for the top?

2 Answers2

Linked

Related