MaterializeCSS 侧导航不起作用答案

【问题标题】：MaterializeCSS side nav not workingMaterializeCSS 侧导航不起作用
【发布时间】：2016-06-01 16:08:15
【问题描述】：

我遇到了与this 帖子相同的问题，但给出的答案对我不起作用。当我尝试使用 MaterializeCSS 移动汉堡菜单时，它仅在第一次被按下时起作用，然后只是在 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() 函数放在最后，但这也不起作用。

【问题讨论】：

看看你的控制台，有没有错误？
是的，我刚看了看，当我尝试时，我会看到 Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.。
在网上看它似乎是一个 chrome 的东西，它在 Firefox 中也不起作用，但该消息没有出现在那里。很困惑！
我会从头开始并重新跟踪您的步骤。摆脱所有其他 JS 并尝试使导航自行工作。看起来您也可以以编程方式执行此操作，也许可以尝试一下。来自他们的文档：$('.button-collapse').sideNav('show'); 和 $('.button-collapse').sideNav('hide');
另外，您是否添加了所有您需要的 JS 库？以正确的顺序？ jQuery优先？

标签： javascript html css materialize

【解决方案1】：

我怀疑您的 $(window).scroll 处理程序干扰了视差插件，但如果没有您的完整标记，很难判断。您是否尝试过改用materializecss scrollfire plugin？

This codepen 展示了汉堡包与视差的完美结合。

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

【讨论】：