Streaming live at 10am (PST)

Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation


#1

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:

  1. A standard Navbar component directly inside the body
  2. An element with a class named header or Header directly inside the body
  3. 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 (http://forum.webflow.com/t/center-a-section-on-smooth-scroll/1495/12) - this takes into consideration fixed headers as well.

Help with scrolling to anchors
In Page linking not scrolling to correct location
Setup floating NavBar so it doesn't obstruct text on in-page links?
Link Block Scroll - Custom Area
Hide and reveal not working? Also linking to in page question
[SOLVED] Vertical Nav, Not Quite Right
Smooth scrolling offset?
Anchor links don't anchor sections to the top of the browser!
Section linking with horizontal scrolling
Linked sections scrolling to wrong place
Scroll Trigger Passes Top of Section
Smooth-scroll passes my sections on one-page website
Need help with smooth section scrolling in Chrome
Fixed Header/Navigation needs margin space after section top
Fixed Nav question
Issue with smooth scroll not aligning, using fixed header
Error in site navigation
Javascript For Hiding Page ID
Problem with scroll script to align correctly with fixed headers/navigation
Need help with alignment of fixed navbar when section scrolls
Help with scrolling to section links
Need help with section scrolling alignment
Nav bar issue when link scrolls to section
#3

hi there!

this seems to be very nice to use but i cant get to understand how o do this? Is there anyway to send some screenshots of this?

Cheers!


#4

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)


#5

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.


Help with scrolling to anchors
#6

I moved 2 posts to a new topic: Issue with smooth scroll not aligning, using fixed header


#7

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?


#8

can you push an example webflow site for callmevlad tip?

thanks
toby


#9

2 posts were split to a new topic: Need help with smooth scroll section linking


#11

2 posts were merged into an existing topic: Need help with smooth scroll section linking


#12

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.


#13

Just saved my life! Thanks @callmevlad!


#14

Hey Guys,

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.

Published: http://apd.webflow.io
Read Only: https://preview.webflow.com/preview/apd?preview=a9468e6e5ee21173f6179b47d22a4e3e


#15

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.


#16

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.


#19