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插件更改图像不透明度。

MaterialiseCSS侧导航无法正常工作

1 个答案: