Better way to stop body from scrolling?

[ZdelonO]

I'm trying to build a layout that, when the sidebar is scrolled, the main content area doesn't scroll along with it when you reach the bottom of the sidebar.The only way I can think of to achieve this is to add a class to the body/html when hovering over the sidebar, that sets the overflow of the body to hidden, therefor stopping the fly away scrolling.\[code\]$(document).ready(function () { $(".sidebar").hover(function () { $('body,html').addClass("special-overflow"); }, function () { $('body,html').removeClass("special-overflow"); }); });\[/code\]Here's a jsfiddle of the basic layout. http://jsfiddle.net/V7vaK/The problem with this is the sidebars disappear when you hover the sidebar and it sort of jerks the page around.I've been googling this for a while now and I can't see, nor can I come up with a better solution.Can anyone suggest something more elegant than this?