0

2 つの異なるナビゲーションを呼び出すレスポンシブ Web レイアウトがあります。画面サイズが幅 768px より大きい場合は 1 つのナビゲーションを呼び出し、画面幅が幅 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,

    });
 }


});
4

2 に答える 2

0

コメントを読む:

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 の準備ができたら 1 回、サイズ変更が発生したときに N 回呼び出せます。

于 2013-06-03T20:47:55.460 に答える