Modifier la position de la barre de navigation lors du défilement dans MaterialiseCSS

Question

Poing de tous, désolé pour mon mauvais anglais.

J'ai ce site avec un logo d'entreprise en haut et une barre de navigation en bas. Je veux changer la position de la barre de navigation vers le haut quand je défile devant le logo de l'entreprise.

J'essaie de le changer avec CSS:

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

à ...

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

utilisant Materialize.js sur le $ (document) .ready (function() {}) avec le prochain algorithme:

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'); 
     } 
     }); 
    } 

mais cela n'a pas fonctionné.

Answer 1

Tout d'abord, la propriété css position n'a pas la valeur top.

Bon, voici un script pris 3 minutes de mon temps. Je crois que vous pouvez facilement l'améliorer pour le laisser répondre à vos besoins. Supposons que votre logo de l'entreprise a 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(); 
});