Stretching content width to 100% after sidebar disappears when scrolling

Hi guys, I’m working on a wordpress site right now that has a 960px width. I’m using the Toolbox template and building a child theme from it.

This theme uses the standard setup of a full width header and menu, followed by 2 columns of content (left) and sidebar (right) and followed by a full width footer.

Since 960px is pretty narrow with a sidebar and individual posts or pages could potentially have a lot of content, I would like the content to stretch out to 100% when you scroll down enough that the sidebar is no longer visible. I would like this to be dynamic, so when you scroll back up, the content would shrink again.

Here you can see that the content is making room for the sidebar/widget-area in the primary div and the content itself is being pushed back by the margin in the content div.

#primary {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 0;
}
#main .widget-area {
	float: right;
	overflow: hidden;
	width: 220px;
}
#colophon {
	clear: both;
	display: block;
	width: 100%;
}

/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}

There’s even CSS already in for pages without sidebars setting margin to 0. Problem is that I have no idea how to automate this, so it could set the margin to 0 when the sidebar is no longer on screen.

TL;DR: When scrolling, I want to automate setting {margin: 0;} on a certain CSS selector when my sidebar is no longer visible on screen to stretch or shrink content.

Any suggestions? Thank you for your time.