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

Question

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

我想做的是禁用 window 宽度为 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

条件反转。 $(window).width()<800 试试这个：

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

Answer 2

使用 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.

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

更新

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

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

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

Disabling a jQuery script in HTML for a specific window width

javascript

jquery

html

fullpage.js

responsiveness

更新