当所有内容在浏览器窗口中可见时，如何使div更改为固定位置？

Question

Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.

If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.

Neat little effect.

I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.

Not sure how to actually code that though.

Can someone help out, maybe even a basic fiddle?

Answer 1

You can do this with simple CSS.

.div_name {
position:fixed;
}

check W3schools Position fixed property for tags