- This topic is empty.
May 5, 2017 at 3:11 pm #254549trojanParticipant
I would really appreciate your help. I have a menu that becomes fixed when it hits the top of the viewport. I have done a test
case in codepen (for some reason the menu is not fixing most certainty my code) I would also like to have a logo change when the menu becomes fixed. Could someone point me in the right direction to creating this affect. your help is much appreciated in advance.May 6, 2017 at 12:33 am #254550BeverleyhParticipant
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.htmMay 20, 2017 at 11:21 am #255043trojanParticipant
Sorry for the late reply Beverleyh, I just got back from holidays. your demos and examples were a great help to to me. thank you for the help.May 23, 2017 at 11:27 pm #255142amitbhadale156Participant
nice thank youMay 28, 2017 at 2:24 am #255271AtelierbramParticipant
Ha, ha… steal away! I’ve learnt so much from everyone else’s snippets and tutorials over the years that I’m glad when I can give something useful back :D