0

i need some help with a problem. I have a sticky header, and he's actually coming from top to bottom while scrolling.

I need to make a javascript that makes it stop when it meets a specific element with a data-attribute.

Lets say this is the the structure

    <div class="header" data-attribute="header-sticky"></div>

    <div class="destination element" data-attribute="destination">
</div>
    <div class="destination element" data-attribute="destination">
</div>

<div class="destination element" data-attribute="destination2">
</div>

i want to make the logic to stop it when scrolling when it reaches the first data-attribute. (the idea is that we gonna stop it at first data-attribute selected if there is more than one with the same name) otherwise we can decide which element we have to reach (for example destination2)

Thank you all

MathKimRobin
  • 1,268
  • 3
  • 21
  • 52
edith_dvd
  • 1
  • 2
  • It will help us to help you if you put code you tried to achieve what you want. You can check this question ( https://stackoverflow.com/questions/51045863/how-can-i-make-multiple-on-scroll-fixed-headers-navbars-that-stick-at-the-very-t ), it may help you. – shotgun02 Feb 01 '21 at 12:43
  • It doesnt help since its not what i want to achieve. What i need its easy. I have sticky header and i want it to disappear at custom component with specific attribute – edith_dvd Feb 01 '21 at 15:32
  • Does intersection Observer help? – A Haworth Feb 01 '21 at 16:00

0 Answers0