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 Headerdirectly 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.
Here’s an example with a fixed navigation is in transparent light blue:
Without correct settings:
(As you can see the fixed navigation is overlapping the contact section and encroaching on the content inside. This example isn’t drastic, but if the top padding on this section is smaller the problem would be more noticeable)
With correct settings described above by @callmevlad:
(As you can see the bottom of the fixed navigation is at the top of the contact section, not overlapping it)
Hey guys, thanks for the awesome feature, I really needed a way to increase the speed of scrolling to different sections using navbar links. Just a quick tip: a value of 0.5 actually makes scrolling 2x faster, while a value of 2 slows it down. It might be me, but I got the opposite impression from the initial post by @callmevlad.
Sorry to resurrect an old topic but I am having a new issue with this. I have a position:fixed header that starts off display:none but through an interaction (when you scroll past a certain point) it slides down into view. I had used callmevlad’s suggestion and set the element to have a HTML5 tag and everything was dandy with my in-page linking.
However, recently the header has reverted to covering the the top portion of the section of the page I am trying to link to. As far as I know, nothing about the page has changed but this feature has stopped working and I am bamboozled as to why. Any ideas?
Now you need to use the selection of Header from the settings tab for this to work correctly on a published site.
The others methods outlined above will work in PREVIEW, but apparently not on a published site.
This is going to sound weird. I have a nav bar on http://apd.webflow.io and I made it fixed with a transparent background. The problem is though that I want the section scroll to go all the way up under the nav bar. I am using a menu icon on all breakpoints to open the menu.
My other issue is the links in the menu… Although linked to the proper section… They do not scroll to the proper sections… For starters the about section when clicked just scrolls to the slider… And the other sections scrolls to the section above them.
This issue seems to back. I can’t edit the top level element to be < header > via the setting tab in workflow so the scroll covers the top of each section on the page.
I can edit the dom via chrome tools and it works ok, allowing the correct offset for the size of the nav bar.
I also had a problem with the sections scrolling to the top of the page, not to the bottom of the fixed Navbar. The solution was to uncheck “Disable scroll offset when fixed” in the Navbar settings.
