I have created a sticky header on my site using JQuery that works great. The header (really a navigation menu) loads at the bottom of the page, and as the user scrolls down the header then sticks to the top of the page.
Everything with this works great. But, where I am now having trouble is scrolling to the individual div id’s when the nav links are clicked. When the user clicks on a navigation button, it does scroll to the top of that specified div, as it should. But, I now have a header stuck to the top, which has a higher z-index, and therefore covers the top portion of that div that was just scrolled to.
My question is this, does anyone know what to change in the webflow.js file that would cause the scrolling function to scroll to a particular id + 66px? I have done some research and found some solutions, but they require new code and are redndant. I am confident there is a way to add something similar to “+ 66” within the existing code to accomplish this, but my JS skills are not very strong.
Anyone have any ideas?