MaterializeCSS端导航不起作用

Question

我有与此帖子相同的问题，但给出的答案对我没有用。 当我尝试使用MaterializeCSS移动汉堡包菜单时，它仅在第一次按下时起作用，之后仅在URL末尾添加一个hastag，实际上根本没有打开侧面导航栏。

我的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处理程序正在干扰视差插件，但是如果没有完整的标记，很难分辨。 您是否尝试过使用materializecss scrollfire插件 ？

此代码笔显示汉堡包与视差一起很好地工作。

该Codepen与上一个相同，但也演示了如何使用scrollfire插件更改图像不透明度。