1

I have trouble in getting materialze.js and fullpage.js working together. Here is an jsfiddle to demonstrate the problem. Fullpage.js is setup to jump in responsive mode at 640px. In normal-mode (641px and above) everythings works as expected. In responsive-mode everythings works fine, as long the Slideout-Menu (materialize.js) is not used. After the Slideout-Menu is been used, mouse-scrolling stopped completely. While keyboard-scrolling works fine.

See jsfiddle.net

materialize markup

<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>

fullpage markup

<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>

materialized js

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

fullpage js

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

1 Answers1

0

Materialize menu is somehow removing the overflow: visible; property applied to the body element by fullpage.js on responsive mode.

Just add it again when closing the menu:

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

});

Reproduction online

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Yes, it does the trick. I also add `#sidenav` to the event-listener. `$(document).on('click', '.drag-target, #sidenav', function(e) { ... });` thanks, you made my day. – netzego May 13 '16 at 15:08
  • Of course you'll need to add the `#sidenav` selector only if you use the material menu with the option `closeOnClick: true` like in my example. – netzego May 13 '16 at 15:57