如何检测浏览器大小并更改javascript函数控件直播

时间:2013-12-08 13:29:43

标签: javascript jquery fullpage.js

我使用的是fullpage.js(https://github.com/alvarotrigo/fullPage.js)这是一个整页滑块。

我没有开发经验,但我想要实现的是,如果浏览器大小例如是640px,则fullpage.js函数会切换函数内部的控件;          autoScrolling:true, autoScrolling:false,

这就是函数的样子;

$(document).ready(function(){

$.fn.fullpage({
    anchors: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact'],
    navigation: true,
    navigationPosition: 'right',
    scrollingSpeed: 400,
    autoScrolling: true,
    navigationTooltips: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact']
});

});

原因是因为这个插件的性质在屏幕尺寸减小后我的div和内容会丢失,因为它通过操作不同的控件来切断我可以使较小的设备自然滚动页面而不限制高度的大小。

那么有没有一种方法或脚本可以像css媒体查询一样识别屏幕被缩小,所以它会在某个断点处运行javascript,然后在不同的断点处使用另一个断点?

我提前道歉,如果这是愚蠢或非常明显的问题,这不是我的专业领域(使用/写/阅读javascript),但这可以做到吗?我正在考虑以正确的方式实现这样的解决方案的逻辑,还是有更简单的方法?

由于

1 个答案:

答案 0 :(得分:1)

那样的东西? (未经测试)

$( window ).resize(function() {
    var windowWidth = $( window ).width();
    if (windowWidth < 640) {
        $.fn.fullpage.setAutoScrolling(false);
    }
    else {
        $.fn.fullpage.setAutoScrolling(true);
    }
});