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

Question

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

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

所以我想在视口小于 700 像素时将导航设置为 false

我试过了但是没用

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

谢谢

Answer 1

为什么不使用正常的 CSS 媒体查询？

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