How to make smooth scroll align a fixed navbar with named sections

Design help General
1

Hello All,

I have a page with a fixed navbar and when I set the link to go to a section on the page, the navbar overlays on top of the section and the top of the section sits at the browser top edge. Is there any way to make it so that the page scrolls so that the section top lines up with the bottom of the navbar?

You can check out my public link here https://webflow.com/design/canalalarmdevices?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74

Thanks!

2

If you go inside your header symbol, go to the section that has the ‘FixedNavBar’ class, and change it’s HTML5 tag to Header, it should work like you expect.

In case you’re interested in details, Webflow uses the following selector to find a header on your page for the smooth scroll script:

$('header, body > .header, body > .w-nav')

This means that Webflow will check to see if the following elements make up a fixed header:

  • An element with the header HTML5 tag type
  • An element with the class header directly inside the body
  • A navbar (has the w-nav class) directly inside the body
1 Like
3

Hey Vlad, thanks so much! That fixed it!

But I am having another issue that’s been going on for a while. The smooth scroll does not work so smoothly in Safari 6 or 7. It looks okay in Chrome. I took a video of what I am seeing and its not only me, my client sees the same thing and it is not making webflow look very good as a design tool right now unless it gets fixed.

Thanks,
Dave

4

Safari does have known scroll performance issues that are outside of our control, but you can safely fall back to default browser behavior (instant, non-smooth scroll) if by adding a custom attribute to the main element:

Name: data-scroll-time

Value: 0

This will make sure that the default browser behavior is used, and will instantly scroll to the section. The one advantage over the native “jump to named element” is that it will account for the fixed header.

I’m going to do a bit more investigation though to see if there’s some way around Safari’s slowness.

5

Thank you Vlad, I definitely don’t want it to be the default jump. I really like the smoothness on mobile but in safari it just looks broken.

6

Wouldn’t be easier for you to simply leave the default Webflow Navigation Widget and make a code like this:

Wrap this code with <script>...</script> tags and put it into the before </body> part in Custom Code.

$(window).scroll(function() {
  if($(window).scrollTop() > $('.herosection').height()) {
    $('.fixednavbar').animate({
      'background-image' : 'url(http://uploads.webflow.com/531e28893358bfec6d000162/533a447ab574f1bd5c00013c_BlueNoise6.png)'
    });
  }
});

OR

$(window).scroll(function() {
  if($(window).scrollTop() > $('.herosection').height()) {
    $('.fixednavbar').addClass('bluebg');
  } else {
    $('.fixednavbar').removeClass('bluebg');
  }
});

The second attempt is better in my opinion. Simply add a bluebg class to that navigation bar and apply styles (background, box-shadow etc). Then remove that style so it’s not visible on default. To the regular navbar class simply add a transition effect so it will smoothly add that class to your navigation once you reach the bottom of the hero section :slight_smile: Works perfectly for me on all browsers including Safari.

1 Like
7

Hey Vlad, this doesn’t seem to work with interactions on the navbar element when its set to show after the hero. I was hoping there might be a fix for this.

Here is my public link. The products link takes you to a section in the page.

https://webflow.com/design/canalalarmdevices?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74

Thanks!