Sidebar scrolls if context != body


#1

I need to have a left-side fixed sidebar that is not directly under body (for use with Ember). Setting the sidebar context to the enclosing div works in every respect except the sidebar is no longer fixed and will scroll with the page content.

sidebar({context : $('#div-id')})

I have tried various classes on the enclosing div, including the following.

<div class = "ui bottom attached segment pushable" id = "div-id">

The sidebar itself is in this div.

<div class = "ui vertical inverted sidebar menu">

The sidebar correctly displays and hides, but when you scroll vertically, the sidebar scrolls with the page content. With all other things being the same, removing the enclosing div so that the sidebar and pusher are directly under body, the sidebar remains fixed as the page content scrolls vertically.

This is not an Ember problem because I can completely remove Ember and the problem remains. A simple way to reproduce the problem is to download the template at http://semantic-ui.com/examples/homepage.html and make only two changes: add the div inside of body and add the JavaScript to set the sidebar context.

Is this a bug, or are different classes needed on the sidebar or the enclosing div?

Thanks.