2

我正在使用 fullpage.js ( https://github.com/alvarotrigo/fullPage.js ),它是一个整页滑块。

我在开发方面没有经验,但我想要实现的是,如果浏览器大小例如为 640 像素,则 fullpage.js 函数会切换函数内部的控件; autoScrolling: true, to 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)是愚蠢或非常明显的问题,我提前道歉,但这可以做到吗?我正在考虑实现这样一个解决方案的逻辑是正确的方法,还是有更简单的方法?

谢谢

4

1 回答 1

1

类似的东西?(未测试)

$( window ).resize(function() {
    var windowWidth = $( window ).width();
    if (windowWidth < 640) {
        $.fn.fullpage.setAutoScrolling(false);
    }
    else {
        $.fn.fullpage.setAutoScrolling(true);
    }
});
于 2013-12-08T13:35:46.227 回答