offcanvas-サイドバーブートストラップ4スティッキーサイドバー

Question

こんにちは私は私のウェブサイト

http://v4-alpha.getbootstrap.com/examples/offcanvas/#

を構築するためのテンプレートoffcanvasブートストラップ4を使用recentyは今、私は私のサイドバーは、ユーザーがスクロールとして従うようにしたいけど、ブートストラップは取り外しクラスを貼り付け、cssの位置を付けることを推奨します。私はこれを行い、サイドバーをターゲットにしようとしましたが、レイアウトをねじ込みます。

Htmlの

<div class="container-fluid header navbar-fixed-top">   
    <div class="row"> 
      <div class="hidden-md-up col-xs-2"> 
       <button type="button" class="btn btn-secondary" data-toggle="offcanvas"><i class="fa fa-bars"></i></button> 
      </div> 

      <div class="col-md-12 col-sm-8 col-xs-8">       
       <img src="images/logo.gif" class="img-fluid center-block" alt="emblem">       
      </div> 
    </div> 
</div><!-- /HEADER --> 

<div class="container-fluid"> 
    <div class="row row-offcanvas row-offcanvas-left"> 

     <div class="col-md-2 col-sm-2 col-xs-4 sidebar-offcanvas" id="sidebar"> 
      <ul class="nav nav-stacked"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#about">About Us</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#area">Locations</a>  
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#deals">Deals</a>  
       </li>     
       <li class="nav-item"> 
        <a class="nav-link" href="#contact">Contact Us</a> 
       </li> 
      </ul> 
     </div><!-- /Navigation --> 


      <section id="home"> 
       <div class="row"> 

        <div class="col-md-6 col-md-offset-5 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1"> 
         <img src="images/mazda2.gif" alt="Mazda2" class="img-fluid center-block"> 
        </div> 

        <div class="col-md-6 col-md-offset-5 col-xs-12 text-xs-center">       
         <h3>Perth, Western Australia</h3>       
        </div> 

       </div> 
      </section><!-- HOME --> 

      <section id="about"> 
       <div class="about-me"> 
        <h3>About Us</h3> 

       </div> 
      </section><!-- ABOUT --> 

    </div><!--ROW -->  
</div><!-- CONTAINER-FLUID --> 

CSS

/* 
* Style tweaks 
* -------------------------------------------------- 
*/ 
html, 
body { 
    overflow-x: hidden; /* Prevent scroll on narrow devices */ 
} 
body { 
    padding-top: 7em; 
    position: relative; 
} 

/* 
* Off Canvas 
* -------------------------------------------------- 
*/ 
@media screen and (max-width: 767px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all .25s ease-out; 
     -o-transition: all .25s ease-out; 
      transition: all .25s ease-out; 
    } 

    .row-offcanvas-left { 
    left: 0; 
    } 

    .row-offcanvas-right { 
    right: 0; 
    } 

    .row-offcanvas-left 
    .sidebar-offcanvas { 
    left: -33%; /* 4 columns */ 
    } 

    .row-offcanvas-right 
    .sidebar-offcanvas { 
    right: -33%; /* 4 columns */ 
    } 

    .row-offcanvas-left.active { 
    left: 33%; /* 4 columns */ 
    } 

    .row-offcanvas-right.active { 
    right: 33%; /* 4 columns */ 
    } 

    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 33%; /* 4 columns */ 

    } 
} 

/* 
    * Custom Style 
    * -------------------------------------------------- 
    */ 

    #sidebar { 
    background-color: white; 
    position:absolute; 
    height:100vh; 
} 

    .header { 
    background-color: #232323; 
} 

.btn-secondary { 
    background-color: #232323; 
    border-color: #232323; 
    margin-top:0.3em; 
} 

/* 
    * HOME 
    */ 

#home { 
    background-color: #434343; 
    height: 100vh; 
    width: 100vw; 
} 

いずれか.nav doesntの仕事をターゲットにそれはおそらく私のサイドバーオフキャンバス、サイドバーの位置とは何かをしました。しかし、mysidebarの位置がなければ、私のセクションの内容はプッシュダウンされます。私はitandusing COL-xxのクラスが、ノー行くtriedremoving :(

Answer 1

私はあなたが使うべきだと思う：

@media screen and (min-width: 768px) { 
    .sidebar-offcanvas .nav-stacked { 
    position: fixed; 
    top: 8em; 
    width: 33%; 
    } 
} 

読むよりおよそposition: fixedで：私のサイドバーに固定されたメディアクエリーと位置を使用して検討しAffix is not working in Bootstrap 4 alpha