针对特定窗口宽度禁用 HTML 中的 jQuery 脚本

Question

我知道这可能是一个非常基本的问题，但我在 fullPage.js 脚本 (https://github.com/alvarotrigo/fullPage.js) 的帮助下构建了一个网站，但对 jQuery/Javascript 了解甚少。

我想要做的是禁用窗口宽度为 800 像素及以下的脚本，但将其启用为更高。或者，我想在脚本中以相同的条件将某个变量设置为 false。

这就是脚本的样子（我删除了一些设置以使其更短）：

<script>
    $(document).ready(function() {
            $('#fullpage').fullpage({
                responsiveWidth: 800,
                continuousVertical: true
            });
        });
</script>

这是我试图让它简单地工作，但它似乎不起作用：

<script type="text/javascript">
if ( $(window).width() > 800) {
   $(document).ready(function() {
            $('#fullpage').fullpage({
                responsiveWidth: 800,
                continuousVertical: true
            });
        });
}
</script>

Answer 1

使用 fullPage.js 响应选项，例如 responsiveWidth 或 responsiveHeight。

Example online

 $('#fullpage').fullpage({
     responsiveWidth: 800,
     continuousVertical: true
 });

详细in the docs：

responsiveWidth:（默认 0）在定义的像素宽度下将使用普通滚动（autoScrolling:false）。一个类 fp-responsive 被添加到 body 标签中，以防用户想要将它用于他自己的响应式 CSS。例如，如果设置为 900，只要浏览器的宽度小于 900，插件就会像普通网站一样滚动。

responsiveHeight:（默认 0）在定义的高度（以像素为单位）下将使用普通滚动 (autoScrolling:false)。一个类 fp-responsive 被添加到 body 标签中，以防用户想要将它用于他自己的响应式 CSS。例如，如果设置为 900，只要浏览器的高度小于 900，插件就会像普通网站一样滚动。

此外，您可以使用 fp-auto-height-responsive 类来防止 fullPage.js 将您的部分的大小限制为 100% 的高度。阅读它in the docs too。

更新

如答案中所述，现在他想知道如何在移动设备上禁用verticalCentered。 就像使用上面详述的响应选项（也将禁用自动滚动）及其state class 覆盖使用verticalCentered:true 时应用于部分的.fp-tableCell 类一样简单。

.fp-responsive .fp-tableCell {
    vertical-align: top;
}

Answer 2

条件切换。 $(window).width()800试试这个：

<script type="text/javascript">
if ( $(window).width() < 800) {
   $(document).ready(function() {
            $('#fullpage').fullpage({
                responsiveWidth: 800,
                continuousVertical: true
            });
        });
}
</script>