javascript - MaterializeCSS 侧导航不起作用

Question

我遇到了与 this 相同的问题发布，但给出的答案对我没有用。当我尝试使用 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 plugin相反？

This codepen显示汉堡包与视差一起很好地工作。

This codepen与上一个相同，但它也演示了使用 scrollfire 插件更改图像不透明度。