Change selected button & images while scrolling

user_7503322 0
Viewed 245

On my html I have 3 buttons(will be seen on my page on one section) and each button has a related image. When you start from the top, you will see the 3 buttons on the left and on the right the image from the button that is selected.It will start at first with the first button selected.

The idea is while scrolling down until some height, I want to change the button that is active to the second one and also change the image on the right. Then when continue scrolling again it should select the third button and its image.

Which event or css styling should I use to have this behavior ? Should I use intersection observer ?

I want to use Html, css & js

<section
  style="display: flex; flex-direction: column; padding-left: 100px; height: auto; position: sticky; top: 0"
>
  <button style="width: 100px; height: 100px; background-color: red">
    Button 1
  </button>
  <button style="width: 100px; height: 100px">Button 2</button>
  <button style="width: 100px; height: 100px">Button 3</button>
  <button style="width: 100px; height: 100px">Button 4</button>
  <button style="width: 100px; height: 100px">Button 5</button>
  <button style="width: 100px; height: 100px">Button 6</button>
  <button style="width: 100px; height: 100px">Button 7</button>
</section>
<section style="height: 200px">Section 2</section>
<section style="height: 200px">Section 3</section>
<section style="height: 200px">Section 4</section>
<section style="height: 200px">Section 5</section>
css html
1 Answers

IntersectionObserver could be useful here.

Set up just one observer and then observer.observe(each of your sections).

If something isIntersecting highlight its related button and put its image to be shown. If !isIntersecting, remove its button highlight.

Look at the details of options you can set on MDN.

In particular, you will have to decide how much of a section has to come into view before you set its highlight and image and which section ‘wins’ if several sections are in view at once.

Let me know if you need further help, but please include some sections in your question’s code to make it easier to see what is required.

user_108674540
Related