Question

我有一个响应式网页布局，可以调用两种不同的导航。我试图在屏幕尺寸大于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次。

jQuery响应调用

2 个答案: