javascript - 针对特定窗口宽度禁用 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: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

此外，您还可以使用 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;
}