Sticky Bootstrap Sidebar erzeugt Lücke entlang des rechten Randes

Question

Wenn ich meine Bootstrap-Sidebar um position:fixed ergänze, hinterlässt es auf der rechten Seite eine Lücke. Ich habe versucht, Ränder, Polsterung usw. zu entfernen, aber hatte kein Glück.

Hier ist, was die Lücke wie folgt aussieht:

Ohne position:fixed, das aktive Element in der Seitenleiste auf die volle Breite des Mutter erstreckt.

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

Bit aufgeregt ich nicht in der Lage war, um es mit reinem CSS bekommen zu arbeiten, aber ich konnte halb lösen dieses Problem mit einem jQuery Bibliothek mit dem Namen Sticky-kit.

Ich endete entfernt position:fixed Eigentum von CSS und nur $("#timeline_sidemenu").stick_in_parent(); zwischen Skript Tags von HTML-Code enthalten.