Here’s a basic demo using vanilla JS (no jQuery) http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-element-when-in-view-basic.htm
It’s a small function that adds a class to an element when it scrolls to an arbitary distance from the top of the viewport, in % or px (-/+ integer). Then you can use this added class in your CSS to apply new styling to your selected element (the basic demo above just changes background colour).
I haven’t had chance to write up the accompanying blog for it yet, but there are additional incarnations of the script linked at the bottom of the same basic demo page, each getting more advanced to support various user needs;
1 – Instead of only taking a single element ID, this version can also accept a class, meaning it can “watch” multiple trigger elements in one go. It also applies multiple classes instead of just a single class to allow for refactoring or more adventurous CSS styling http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-element-when-in-view-reduced.htm
2 – This last version does what the above does, but with the significant difference of the trigger elements being optionally different to the target elements (“watch A but add classes to B” logic) http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm
