function - 我正在使用 fullpage.js 并想隐藏小屏幕的导航选项（最大宽度：700px）

Question

这是调用 fullpage.js 并设置选项的脚本：

  <script>
    new fullpage('#fullpage', {
      //options here
      autoScrolling: true,
      scrollHorizontally: true,
      navigation: true,  
    });
  </script>

因此，当视口小于 700 像素时，我想让导航为假

我试过这个但没有用

function myFunction(x) {
  if (x.matches) { // If media query matches
    fullpage('#fullpage', { navigation: true,
});
  } else {
   fullpage('#fullpage', { navigation: false,
});
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

谢谢

标签： functionconstructormedia-queriesfullpage.js

Answer 1

为什么不使用普通的 CSS 媒体查询？

@media screen and (max-height: 700px){
  #fp-nav{ 
   display: none;
  }
}