Question

对于我的网站，我通过一个根据窗口宽度更改scrollOffset的函数对pageScroller进行了初始化。

jQuery(function offset_value(){
if ($(window).width() < 960)  {
    $(document).ready(function(){
        // initiate page scroller plugin
        $('body').pageScroller({
        navigation: '#nav',
        scrollOffset: -40
        });         
        });
} else {
    $(document).ready(function(){
        // initiate page scroller plugin
        $('body').pageScroller({
        navigation: '#nav',
        scrollOffset: -195
        });
        });
}
});

但是，我还需要在窗口大小调整时重新加载此函数。例如，如果用户旋转智能手机，则窗口宽度会发生变化。所以，我添加了这段代码：

$(window).resize(function() {
    offset_value()
}).resize();

问题是scrollOffset值在窗口大小调整时没有变化，就像没有调用offset_value函数一样。

一个（不那么优雅）的解决方案是在窗口调整大小时刷新entaire页面：

$(window).resize(function() {
location.reload();
return;
});

但我不喜欢在设备旋转时必须等待网站重新加载。

问题出在哪里？有什么建议吗？

感谢。

Answer 1

您不需要函数内部的文档就绪处理程序：

jQuery(function offset_value(){
if ($(window).width() < 960)  {
   // initiate page scroller plugin
    $('body').pageScroller({
    navigation: '#nav',
    scrollOffset: -40
    });
 } else {
   // initiate page scroller plugin
    $('body').pageScroller({
    navigation: '#nav',
    scrollOffset: -195
    });}
});

Answer 2

您不应在函数中使用文档就绪处理程序。另外我建议你创建一个函数并将其传递给 document-ready handler 和 window-resize handler

使用

//Create a function    
function offset_value() {
    if($(window).width() < 960) {
        // initiate page scroller plugin
        $('body').pageScroller({
            navigation: '#nav',
            scrollOffset: -40
        });
    } else {
        // initiate page scroller plugin
        $('body').pageScroller({
            navigation: '#nav',
            scrollOffset: -195
        });
    }
};
//Pass function reference to document-ready handler and window resize
$(document).ready(offset_value);
$(window).resize(offset_value).resize();

Answer 3

这里的一个问题是你的函数声明使它无法从外部访问：

jQuery(function offset_value() { ... });

这声明了一个匿名函数，只能由offset_value从函数自己的主体引用。

要解决此问题，您必须在外面声明该函数：

function offset_value()
{
    ...
}

jQuery(offset_value); // run on document ready

您也可以删除$(document).read()，因为在您使用jQuery(fn)时已经完成了。{/ p>

更新

要重新初始化插件，您需要重置全局pageScroller：

pageScroller = {};
$('body').pageScroller({ ... });

在（窗口）.resize内调用一个函数

3 个答案:

更新