Question

在我目前的网站项目中，我已经整合了Alvaro Trigo's FullPage plugin，但由于它在移动设备上的行为非常罕见（也是由于我的项目设计要求），我已经决定了在视口宽度低于768px时关闭它。为此，我只需在脚本中添加一个简单的if语句：

$(document).ready(function(){

if ($(window).width() > 768 ) {

  $('#fullpage').fullpage({

      // code... code... code...

  });
}

});

问题是它只在刷新页面后才生效;因此，当我低于768px并重新加载页面时，插件将被关闭，但是当我在上述断点上方调整浏览器大小时，它仍然关闭（反之亦然）。我想我应该添加一些代码来处理resize，但遗憾的是我目前对JS / jQ的了解并不能让我这样做。提前感谢您的时间。

Answer 1

这应该有效：

$(window).resize(function(){

  if ($(window).width() > 768 ) {

    //do your thing here

  }

}

Answer 2

请改用$(document).resize(function(){ /* do stuff*/ })。然后，您可以在onload

上使用$（document）.trigger（'resize'）

Answer 3

您可以使用jQuery resize事件。见here

将您的代码，您想要做的事情放入一个函数中。使用document ready在$(function() {});上调用该函数，并在调整窗口大小时调用。

$(function () {
    function doSomething() {
        $('#fullpage').fullpage({
                //The code
            });
    }

    $(window).resize(function () {
        //Do it on resize
        if ($(window).width() > 768) {
            doSomething();
        }
    });
    //Do it when page loads.
    doSomething();

});

Answer 4

以下是在DOM ready触发和on resize触发时如何运行匿名函数：

$(document).ready(function() {
    $(window).on('resize', function() {
        //code to run
    })
    .trigger('resize');
});

如何在jQuery中“加载”和“调整大小”（在特定窗口宽度上）运行脚本？

4 个答案: