Html Question posted in
Some basic documentation can be found here.

Html – How to find distance between top of element and top of viewable webpage

I have an element that has position sticky and has the top property set to 30px. I want it so that when the element becomes stuck (so to say) It has a class of stuck added to it. I’m aware it can be done with intersectionObserver however I would like to know a way that I could do it in vanilla HTML, CSS or JS.

The way I have thought of so far is to add the class once the elements distance from the top of the viewable webpage is 30px. When researching, I have come across code like this:

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

Although this does do something, it doesn’t do want I want. What it does is it finds the top of the element to the top of the window height.

(Now at the time of writing this I am not sure if the window height is what it is called but I mean the bit of the webpage that you would get to if you scrolled up until you couldn’t any more. Sometimes it is out of sight).

Using this code, the value I get is always constant as the element is not moving up or down the page, it is only the viewport is moving down the page as you scroll down.

Instead, the value that the function (or whatever) returns should change depending on where you have scrolled to. Before the ‘stuck’ position activates, the distance from the top should vary depending on where you scroll. But once you have hit its ‘stuck’ threshold the distance from the top should stay the same.

I don’t mind the solution as long as it uses HTML, CSS or JS but nothing else.

Tags:

2

Answers


  1. 0

    Compare the el.getBoundingClientRect().top of the element in relation to the amount of scrollY the window has moved, then add/remove class accordingly.

    If this is not what you’re looking for let know.

    const el = document.querySelector('#container'); 
const elRectTop = el.getBoundingClientRect().top;

const setStickClass = () => {
  if(window.scrollY - 30 >= elRectTop){
    el.classList.add('stuck');
  }else if(window.scrollY - 30 < elRectTop){
    el.classList.remove('stuck');
  }
}

addEventListener('scroll', setStickClass)
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 300vh;
  width: 100%;
  padding-top: 50vh;
}

#container {
  position: sticky;
  top: 30px;
  outline: 2px solid black;
  height: 100vh;
  width: 100%;
}

.stuck {
  background-color: red;
}
    <div id="container"></div>
    Login or Signup to reply.
  2. 0
    1. You don’t need to worry about IntersectionObserver. It’s widely supported across majoroty (95.89%) of browsers at the moment since 2016. Just use it if you like it!

    Support page

    1. Vanilla in programming typically refers to a default or standard configuration. Like vanilla ice cream without any mixing flavors. So if you use IntersectionObserver it will mean vanilla.

    2. I decided not to provide a variation of the code from the previous post. I think it will help you.

    Good Luck with you project! 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search