スティッキーブートストラップサイドバーが右マージンに沿ってギャップを作成します

Question

position:fixedをブートストラップのサイドバーに追加すると、右側にギャップが残ります。私はマージン、パディングなどを取り除こうとしましたが、運がなかった。ここで

は、ギャップは次のようになります。position:fixedなければ

、サイドバーの能動素子は、親の全幅に及びます。

HTML：

<div class="container-fluid"> 
     <div class="row"> 
     <div class="col-lg-2 matchHeight" id="side-menu" style="margin-left:30px;"> 
      <ul class="nav nav-sidebar" id="timeline_sidemenu" style="list-style-type:none;"> 
      <li style="text-align:center;color:#999999; margin-bottom:20px;border:0px;"><img src="//i.imgur.com/zOeEoKE.png" width="50"/><br />Instagram</li> 
      <li class="active"> 
       <a href="#"><img src="{{url_for('static', filename='images/icons/timeline_hover.png')}}" width="18" style="margin-top:-5px;" />&nbsp;&nbsp;Timeline</a> 
      </li> 
      <li><a href="/product-evolution/" class="swap" ><img src="{{url_for('static', filename='images/icons/product.png')}}" data-image-regular="{{url_for('static', filename='images/icons/product.png')}}" data-image-hover="{{url_for('static', filename='images/icons/product_hover.png')}}" width='18'>&nbsp;&nbsp;Product Evolution</a></li> 
      <li><a href="/insta_charts/" class="swap"><img src="{{url_for('static', filename='images/icons/chart.png')}}" data-image-regular="{{url_for('static', filename='images/icons/chart.png')}}" data-image-hover="{{url_for('static', filename='images/icons/chart_hover.png')}}" width='18' style="margin-top:-5px;">&nbsp;&nbsp;Growth Data/Charts</a></li> 
      <li><a href="/90-days/" class="swap"><img src="{{url_for('static', filename='images/icons/flag.png')}}" data-image-regular="{{url_for('static', filename='images/icons/flag.png')}}" data-image-hover="{{url_for('static', filename='images/icons/flag_hover.png')}}" width='18' style="margin-top:-5px;">&nbsp;&nbsp;First 90 days in Market</a></li> 
      <li><a href="/public-discussion/" class="swap"><img src="{{url_for('static', filename='images/icons/publicdiscussion.png')}}" data-image-regular="{{url_for('static', filename='images/icons/publicdiscussion.png')}}" data-image-hover="{{url_for('static', filename='images/icons/publicdiscussion_hover.png')}}" width="18" style="margin-top:-5px;" />&nbsp;&nbsp;Public Discussion</a></li> 
      <li style="border-bottom:1px solid #cccccc;"><a href="/founder-activity/" class="swap"><img src="{{url_for('static', filename='images/icons/avatar.png')}}" data-image-regular="{{url_for('static', filename='images/icons/avatar.png')}}" data-image-hover="{{url_for('static', filename='images/icons/avatar_hover.png')}}" width="18" style="margin-top:-3px;" />&nbsp;&nbsp;Founder Activity</a></li> 
      </ul> 
     </div> 

はCSS：

#side-menu{ 
    background-color:#efefef; 
    border-left:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    border-right:1px solid #cccccc; 
    border-top:1px solid #cccccc; 
    padding:25px 0px 0px 0px; 
    box-shadow: 2px 2px 2px #cccccc; 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
    position:relative; 
} 
#timeline_sidemenu{ 
    position:fixed; 
} 
.nav-sidebar > li{ 
    border-top:1px solid #cccccc; 
} 
/* Sidebar navigation */ 
.nav-sidebar > li > a { 
    font-family: proxima-nova,Proxima Nova,helvetica,arial,sans-serif; 
    font-weight: 500; 
} 
.nav-sidebar > li > a:hover, 
.nav-sidebar > li > a:focus { 
    background-color: #f6f6f6; 
} 
.nav-sidebar a{ 
    color:#999999; 
} 

.nav-sidebar a:hover, 
.nav-sidebar a:focus { 
    color: #666666; 
    background-color: #171919; 
} 
.nav-sidebar > .active > a, 
.nav-sidebar > .active > a:hover, 
.nav-sidebar > .active > a:focus { 
    background-color: #ffffff; 
    font-family: proxima-nova,Proxima Nova,helvetica,arial,sans-serif; 
    font-weight: 500; 
    color: #666666; 
} 
.nav-sidebar > .active > a::before { 
    content: ""; 
    position: absolute; 
    border-style: solid; 
    display: block; 
    width: 0; 
    top:10px; /* controls vertical position */ 
    bottom:auto; 
    right:0px; 
    border-width:10px 12px 10px 0; 
    border-color:transparent #cccccc; 
} 
.nav-sidebar > .active > a::after { 
    content: ""; 
    position: absolute; 
    border-style: solid; 
    display: block; 
    width: 0; 
    top:10px; /* controls vertical position */ 
    bottom:auto; 
    right:-1px; 
    border-width:10px 10px 10px 0; 
    border-color:transparent #ffffff; 
} 

Answer 1

私はそれが純粋なCSSでの作業を取得することができませんでしたが、私はjQueryを使って、この問題半解決することができたビット動揺ライブラリSticky-kitの名前で。

私はのコードをCSSから削除してしまい、ちょうど$("#timeline_sidemenu").stick_in_parent();をhtmlコードのスクリプトタグの間に含めました。