sabanna
November 11, 2015, 11:41pm
4
Hello @soulluciani , I had the same issue, but without using any js.
I used advices from this topic and it worked perfect:Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation :
Hey guys, just wanted to point out one hidden feature of our smooth-scroll script - it will automatically treat the bottom of any fixed navigation as the “top” of the page. So if you have a fixed header, and scroll to a section, that section will align perfectly with the bottom of the header (instead of having the top of the section be hidden by the header).
In order for this to work, the header must have position: fixed and has to meet at least one of the following criteria:
A standard Navbar component directly inside the body
An element with a class named header or Header directly inside the body
An element that has the <header> HTML5 tag (specified on the Settings tab)
A few other hidden features that might be useful:
You can add a custom attribute (on the Settings tab) called data-scroll-time to the <body> to affect the speed of the scroll. E.g. setting it to 2.0 will scroll twice as fast as default, while setting to 0.5 will perform a slower scroll.
You can add a custom attribute called scroll and set it to mid to scroll a section to the middle of the page (Center a section on smooth scroll - #12 by thewonglv - General - Forum | Webflow ) - this takes into consideration fixed headers as well.
In short: Create a div and give it html tag HEADER in a settings panel. Make it fixed position. Move navigation inside this header and make it position relative or auto. Then browser will count bottom line of the header as a top line of the browser window.
1 Like