Jquery add class when section isVisible or Hidden on screen

looking for suggestion on how to approach.

Div1 or section - If div 1 is visible on screen apply style 1

Div2 or section - If div 2 is visible on screen apply style 1

Div3 or section - If div 2 is hidden from screen apply style 2 or class 2

Div4 or section - If div 3 is hidden from screen apply style 1 or class1

Any suggestion would be great.

1 answer

  • answered 2020-06-07 05:18 Akash Reddy

    I am Working on a script with intersection observer, let me share a wip soon.

    Idea was to find about out the functions available in JavaScript .

    On researching more about the topic I found the intersection observer. Which seems like a brilliant options and faster load times.

    Below is the the idea of implementation.

    Any section with specific id or a class will enable or disable inline style function visibility. The trickier part would be changing colours on section exit and enabling styling for following section.

    I am bit of a noob with JavaScript, Just trying to challenge my design with UX scripting .

    Ak