Having a class like active on section in viewport only!!!

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I’m always frustrated when […]

Describe the solution you’d like A clear and concise description of what you want to happen.

Describe alternatives you’ve considered A clear and concise description of any alternative solutions or features you’ve considered.

Additional context Add any other context or screenshots about the feature request here.

---

@locomotivemtl feedback below

Current progress for this issue

• Append data-scroll-section-inview when a section is “visible”
• Add ability to define the offset for when a section is considered “visible”. Around here: https://github.com/locomotivemtl/locomotive-scroll/blob/48e90230d001f41a27758bc95afe2ea8199659cf/src/scripts/Smooth.js#L427-L428 Maybe rename offset & limit to start & end for clarity? 🤔

Please keep in mind we work on this library when we can. As a web agency with clients paying for their projects, we have priorities. Since those are enhancements and as long as we don’t need them in our own projects, they are not top priority.

[podrivo]

data-scroll-section-inview is working great for me! I can use this to manipulate fixed elements in the page. Thanks!

[Jerek0]

➡️ See the edited issue description for progress

---

In the meantime if you do not want any offset at all, I suggest you fork this library and play with the window.innerHeight factor on lines quoted above. Probably something like this

let offset = section.getBoundingClientRect().top - window.innerHeight - getTranslate(section).y;
let limit = offset + section.getBoundingClientRect().height + window.innerHeight;