jquery - jQuery 响应式调用

Question

我有一个响应式 Web 布局，它调用两个不同的导航。我试图在屏幕尺寸大于 768px 宽时调用一个导航，而当屏幕宽度小于 768px 宽时调用另一个导航。问题是这个脚本可以工作，除非我从小屏幕开始然后转到大屏幕，我必须点击刷新才能让它工作，反之亦然。

jQuery

$(document).ready(function(){
    if ( $(window).width() > 768) {
// initiate page scroller plugin
    $('body').pageScroller({
        navigation: '.pageScrollerNav',
        scrollOffset: -40,

    });
 }
 else {
 // initiate page scroller plugin
    $('body').pageScroller({
        navigation: '.pageScrollerNav2',
        scrollOffset: -40,

    });
 }


});

Answer 1

如果您在移动设备上，您可以绑定到窗口 onOrientationChange 事件，或者绑定到窗口调整大小事件

$(window).bind("resize orientationchange", function(){
    if ( $(window).width() > 768) {

    $('body').pageScroller({
        navigation: '.pageScrollerNav',
        scrollOffset: -40,

    });
    }else {

       $('body').pageScroller({
          navigation: '.pageScrollerNav2',
          scrollOffset: -40,

        });
    }
})

Answer 2

阅读评论：

function rezisingScroll() { //make it a function so you can call it n times
    if ($(window).width() > 768) {
        // initiate page scroller plugin
        $('body').pageScroller({
            navigation: '.pageScrollerNav',
            scrollOffset: -40,

        });
    } else {
        // initiate page scroller plugin
        $('body').pageScroller({
            navigation: '.pageScrollerNav2',
            scrollOffset: -40,

        });
    }
}


$(document).ready(function() {

    rezisingScroll(); //call once when document is ready

    $(window).resize(function() { // attach to resize event
        rezisingScroll(); //call everytime window resizes
    });
});

您不能简单地直接添加以调整大小，因为它不会在页面加载或 DOM 准备好时触发。这就是我将其设为函数的原因，因此您可以在 dom 准备好时调用一次，并在发生调整大小时调用 N 次。