0

接辞とサイドバーに関する多くの質問を読みましたが、よく理解できないか、問題の解決策が見つかりません。

ここにあるアドバイスに従って、動的にオフセットを定義する JS コードを作成しました (barrehaut はヘッダーのクラスです)。

var y = $('.barrehaut').height();
        $('nav').affix({
            offset: {
            top: y
        }

そして、それはうまく機能しています

別の回答に続いて、nav div を「グリッド上の」別の div にラップしました。

<div class="col-md-3 hidden-print">
    <nav class="bs-docs-sidebar">
        <ul class="nav">
            <li class="active"><a href="#1">Environnement requis pour accéder au service EDIFLEX</a>
                <ul class="nav nav-stacked">
                    <li><a href="#1p1">Préambule</a></li>
                    <li><a href="#1p2">Connexion via internet</a></li>
                    <li><a href="#1p3">Conseils pour l'utilisation du logiciel de navigation</a></li>
                </ul>
            </li>

    </nav>
</div>

そしてもちろん、 Affix Classe を次のように定義します。

.affix {
    top: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 20px;
    position: fixed;

    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

2 つの質問:

1- ウィンドウ サイズが xx px 未満のときにメニューを非表示にするにはどうすればよいですか? （col-md-3接辞なしのように）

col-md-32-上部に固定されたときにメニューの変更が表示されないように、ラッパーの幅に応じて接辞クラスの幅を動的に修正する方法はありますか (私の場合)? JS を介してクラスを追加または削除する方法は知っていますが、CSS クラスの属性を変更する方法はわかりません。可能ですか?

4

1 に答える 1

0

私はそれを行うことができます！

ウィンドウのサイズが 992 px 未満 (Col-md-3 など) のときにメニューを非表示にするには、css を使用しました。

.affix {
    top: 0;
    padding-right: 15px;
    padding-left: 0px;
    margin-right: 20px;
    position: fixed;
    display: none;

  -webkit-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@media screen and (min-width:992px){
    .affix {
        display:block;
    }

適切な幅を維持するために、 JS を使用してナビゲーションの幅を強制しました:

 $(function(){
      var y = $('.barrehaut').height();
        var x = $('.nav').width();
        $('.nav').css({"width":x});
        $('nav').affix({
      offset: {
        top: y
      }

しかし、後で発見した CSS (@media-screen) で同じ方法を使用できたと思います。

于 2014-08-28T15:19:11.450 に答える