32

ナビゲーション バーのサイトで接辞コンポーネントを使用していますが、小さな画面では無効にしたいと考えています。jquery メソッドとデータを使用していますが、画面の解像度が 767px より小さい場合にオフにする方法がわかりません。サイズ変更とスクロール時にウィンドウ幅をキャプチャし、false を返すか接辞クラスを削除しようとしましたが、実際にはうまくいきません。

if($('#subnav').length){

    $(window).resize(function() {
        var wWidth = $(window).width();
        getSize(wWidth);
    });

    $(window).scroll(function () {
        var wWidth = $(window).width();
        getSize(wWidth);
    });

    function getSize(z){
        if(z <= 767) {
                    // I tried doing return false here, no good.
            $('#subnav').removeClass('affix').removeClass('affix-top');
            $('.nav > li').removeClass('active');
        } else {
            setNav();
        }
    }

    var wWidth = $(window).width();
    getSize(wWidth);

    function setNav (){
        $('#subnav').affix({
            offset: {
            top: 420,
            bottom: 270
            }
        });
        $('#subnav').scrollspy();
    }

}
4

2 に答える 2

100

CSS のみを使用して、Bootstrap ページと同じ方法で行うことができます。@media クエリを使用して画面サイズを検出し、fixed画面が特定のサイズを下回る場合は位置を設定しないでください。例えば:

@media (min-width: 768px) {
    .affix {
        position: fixed;
    }
}

このルールは、画面幅が 768px を超える場合にのみ効果があります。

逆にstatic、画面が特定のサイズよりも小さい場合は、要素の位置を明示的に設定することもできます。

@media (max-width: 767px) {
    .affix {
        position: static;
    }
}
于 2013-06-30T21:54:57.357 に答える
0

間違っていたら訂正しますが、そのように設定if(z <= 767) {してみてくださいif(z <= 1) {。サイズは変更されませんか? 私があなたの質問の要点を見逃していない限り。

于 2013-06-30T21:21:20.523 に答える