MaterializeCSS сторона nav не работает

Question

У меня такая же проблема, как и сообщение this, но ответ, который был дан, не сработал для меня. Когда я пытаюсь использовать меню мобильных гамбургеров MaterializeCSS, он работает только в первый раз, когда он нажимается, а затем просто добавляет hastag в конец URL-адреса и фактически не открывает боковой навигатор вообще.

Мой HTML:

<nav class="white"> 
    <div class="nav-wrapper"> 
     <a id="logo-container" href="/" class="brand-logo center">JCSDevelopment</a> 
     <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
      <li><a href="/">Home</a></li> 
      <li><a href="/portfolio">Portfolio</a></li> 
      <li><a href="/contact">Contact</a></li> 
     </ul> 
     <ul id="mobile-demo" class="side-nav"> 
      <li><a href="/">Home</a></li> 
      <li><a href="/portfolio">Portfolio</a></li> 
      <li><a href="/contact">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

И мои JS:

$(window).scroll(function(){ 

    $('.hideme').each(function(i){ 
     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     if(bottom_of_window > bottom_of_object){ 
      $(this).animate({'opacity':'1'},500); 
      console.log('reveal image'); 
     }; 
    }); 
}); 

(function($){ 
    $(function(){ 
     $('.parallax').parallax(); 
     $('.button-collapse').sideNav(); 
    }); 
})(jQuery); 

я поставил решение в мой код, я также попытался положить остальную часть моих JS в функции .ready() и помещенные функция .sideNav() была последней, но это тоже не сработало.

Answer 1

Я подозреваю, что ваш обработчик $(window).scroll вмешивается в плагин parallax, но его сложно рассказать без полной разметки. Вы пытались использовать materializecss scrollfire plugin вместо этого?

This codepen показывает гамбургер, прекрасно работающий вместе с параллаксом.

This codepen такой же, как и предыдущий, но также демонстрирует использование плагина scrollfire для изменения непрозрачности изображения.