🐞 Solved the jump scroll bug! Now everything works. Paid plugin is ready for sale - https://mobilenavbarpro.carrd.co/
- Add a blank mobile-only Container element as a spacer
- Set up an event listener that will execute the scroll function whenever the user scrolls the window.
- Get the distance between the top of the header element and the top of the document, and assigns it to a variable called sticky. This value will be used later to determine whether the header should become "sticky" or not.
- Check whether the current vertical position of the window (window.pageYOffset) is greater than the distance between the top of the header element and the top of the document (sticky). If it is, that means the user has scrolled past the header element, so the sticky class is added to the header element to make it "stick" to the top of the screen.
- Then, the code gets the spacer element and sets its paddingTop CSS property to be the same height as the mobilenavbar element. This is to make sure that when the header becomes sticky, the content doesn't jump up the screen
- If the user scrolls back up so that the header element is no longer "stuck" to the top of the screen, the sticky class is removed from the header element and the paddingTop of the spacer element is set back to 0.
[Code explanation written by ChatGPT]
- Set up an event listener that will execute the scroll function whenever the user scrolls the window.
- Get the distance between the top of the header element and the top of the document, and assigns it to a variable called sticky. This value will be used later to determine whether the header should become "sticky" or not.
- Check whether the current vertical position of the window (window.pageYOffset) is greater than the distance between the top of the header element and the top of the document (sticky). If it is, that means the user has scrolled past the header element, so the sticky class is added to the header element to make it "stick" to the top of the screen.
- Then, the code gets the spacer element and sets its paddingTop CSS property to be the same height as the mobilenavbar element. This is to make sure that when the header becomes sticky, the content doesn't jump up the screen
- If the user scrolls back up so that the header element is no longer "stuck" to the top of the screen, the sticky class is removed from the header element and the paddingTop of the spacer element is set back to 0.
[Code explanation written by ChatGPT]
