Change navbar-fixed position when scrolling in MaterializeCSS

Question

Fist of all, sorry for my bad english.

I've this site with a company logo at the top and a navbar down it. I wanna change the navbar position to the top when I scroll past the company logo.

I try to change it with CSS in:

.navbar-fixed {
  position: relative;
  height: 56px;
  z-index: 1000;
}

to...

.navbar-fixed {
  position: top;
  height: 56px;
  z-index: 1000;
}

using Materialize.js on the $(document).ready(function (){}) with the next algorhythm:

    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    if (startchange.length){
      $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top) {
          $(".navbar-fixed").css('position', 'top');
        } else {
          $('.navbar-fixed').css('position', 'relative');
        }
      });
    }

but it didn't works.

Answer 1

First of all, css property position doesn't have top value.

Okay, here's a script taken 3 minutes of my time. I believe you can easily improve it to let it suit your needs. Say your company logo has id="logo":

function fixNavbar() {
  var $logo       = $('#logo'),
      $nav        = $('.navbar-fixed'),
       offset     = $logo.offset(),
       logoHeight = $logo.height(),
       distance   = offset + logoHeight,
       scroll     = $(window).scrollTop();

  if (scroll >= distance) {
    $nav.css({
      'position': 'fixed',
      'top':      '0',
      'right':    '0',
      'left':     '0'
    });
  } else {
    $nav.css({
      'position': 'relative',
      'top':      'auto',
      'right':    'auto',
      'left':     'auto'
    });
  }
}

$(window).scroll( function() {
  fixNavbar();
});