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

Design help General
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