How to create Facebook Fixed Sidebar with Scroll and Overflow for clicked elements using Bootstrap?

I am running into an issue. I am creating a simple fixed sidebar (similar to Facebook’s sidebar on the right hand side)

In Facebook when you interact with the sidebar 2 things happen

  • Drop menu won't close properly
  • How can I load image(s) used in sass stylesheet in webpack?
  • animating addClass/removeClass with jquery
  • jQuery transitions: on load and after for each click, an addClass
  • jQuery animated circular progress bar
  • How to distribute floated elements evenly with a dynamic column and row count in CSS?
  • 1) A scrollbar appears when the the contents need to be scrolled
    2) When you hover or click an name a popover appears to the left

    I am having issue with the popover conflict with overflow. As from what I understand to get the sidebar to scroll the overflow must be set to scroll on the parent div, this hiding any elements appearing outside of it.

    I am using Twitter Bootstrap to build my sidebar and have created a JSFiddle here of an working example

    http://jsfiddle.net/bNFAf/5/

    The problem with my example is that when I click on the Icon <i class="icon-cog icon-white"></i> to activate the dropdown-menu, it gets cut off due to the overflow set on the #sidebar div.

    Does anyone have any advice on how to get this working? If possible to do without jQuery and just CSS, great! Otherwise jQuery could work..

    DEMO – http://jsfiddle.net/bNFAf/5/

  • CodeMirror CSS only allow edit inside class/id
  • Initially hiding a div for later display
  • Reset progress bar to zero without animation (in bootstrap)
  • Change background color based on website background color
  • disabling slide in particular direction angularjs ionic framework
  • CSS3 Transitions are applied instantaneously on Cloned Elements
  • One Solution collect form web for “How to create Facebook Fixed Sidebar with Scroll and Overflow for clicked elements using Bootstrap?”

    Fiddle

    This uses bootstrap popover it allows for positioning left so that the options fly out over the menu.

    $(document).ready(function(){
    
    $('.icon-cog').popover({
        placement: 'left',
        html: 'true',
        trigger: 'click',
        container: 'body'    
    });
    
    });
    

    You could use JQuery Drill Down Ipod Menu