Question

我无法让materialze.js和fullpage.js一起工作。这是一个jsfiddle来演示这个问题。 Fullpage.js设置为以640px的响应模式跳转。在正常模式（641px及以上）中，每个事件都按预期工作。在响应模式下，只要不使用Slideout-Menu（materialize.js），Everythings就可以正常工作。使用Slideout-Menu后，鼠标滚动完全停止。键盘滚动工作正常。

请参阅jsfiddle.net

实现标记

<nav id="nav">
  <ul id="sidenav" class="side-nav">
    <li data-menuanchor="a"><a href="#a">a</a></li>
    <li data-menuanchor="b"><a href="#b">b</a></li>
    <li data-menuanchor="c"><a href="#c">c</a></li>
    <li data-menuanchor="d"><a href="#d">d</a></li>
    <li data-menuanchor="e"><a href="#e">e</a></li>
  </ul>
  <ul id="quick-links" class="right">
    <li data-menuanchor="b"><a href="#b">b</a></li>
    <li data-menuanchor="c"><a href="#c">c</a></li>
  </ul>
  <ul>
    <li><a id="sidenav-toggle" data-activates="sidenav" href="#!">menu</a></li>
  </ul>
</nav>

整页加价

<div id="fullpage">
  <div id="sa" class="section">a</div>
  <div id="sb" class="section">b</div>
  <div id="sc" class="section">c</div>
  <div id="sd" class="section">d</div>
  <div id="se" class="section">e</div>
</div>

具体化的js

$("#sidenav-toggle").sideNav({
    closeOnClick: true
});

整页js

$('#fullpage').fullpage({
    menu: '#nav',
    anchors: ['a', 'b', 'c', 'd', 'e'],
    normalScrollElements: '#nav',
    paddingTop: 0,
    paddingBottom: 0,
    responsiveWidth: 640
});

Answer 1

在响应模式下按fullpage.js实现菜单installation instructions。

关闭菜单时再次添加：

$(document).on('click', '.drag-target', function(e) {
     //in responsive mode?
     if($('.fp-responsive').length){
         $('body').css('overflow', 'visible');
     }

});

is somehow removing the overflow: visible; property applied to the body element

fullpage.js和materialize.js;使用materialize sidenav禁用鼠标滚动

1 个答案: