AndrewIngram/gist:3061391

## gistfile1.txt
<!doctype html>

<html>
<head>

<meta charset="utf-8">
<link rel="stylesheet" href="nanoscroller.css">

<style>

.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	bottom: 0;
}

.nano {
	background: #bba;
	width: 400px;
	top: 0;
	bottom: 50px;
	height: auto;
	position: absolute;
}

.nano .pane   { background: #888; }
.nano .slider { background: #111; }

.stuff {
	height: 300px;
	background-color: red;
}

.buttons {
	background-color: green;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
}

.nano .pane {
	top: 5px;
	right: 5px;
	bottom: 5px;
}


</style>

</head>
<body>

<div class="container">
<div class="nano">
 <div class="content"><div class="stuff">Hi!</div></div>
</div>
<div class="buttons">
Boo!
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.nanoscroller.js"></script>
<script>

$(document).ready(function(){
	var enabled = false;

	var adjustSidebar = function(){
		var parentHeight = $('.content').height();
		var childHeight = $('.stuff').height();

		if (childHeight > parentHeight) {
			if (!enabled) {
				console.log('enabling');
				enabled = true;
				$('.nano').nanoScroller({ preventPageScrolling: true });
			}
		} else {
			if (enabled) {
				console.log('disabling');
				$(".nano").nanoScroller({ stop: true });
				enabled = false;
			}
		}

	};

	$(".nano").nanoScroller({ stop: true });
	adjustSidebar(false);
	$(window).on('resize', 'body', adjustSidebar);
});


</script>

</body>
	<!doctype html>

	<html>
	<head>

	<meta charset="utf-8">
	<link rel="stylesheet" href="nanoscroller.css">

	<style>

	.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	bottom: 0;
	}

	.nano {
	background: #bba;
	width: 400px;
	top: 0;
	bottom: 50px;
	height: auto;
	position: absolute;
	}

	.nano .pane { background: #888; }
	.nano .slider { background: #111; }

	.stuff {
	height: 300px;
	background-color: red;
	}

	.buttons {
	background-color: green;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	}

	.nano .pane {
	top: 5px;
	right: 5px;
	bottom: 5px;
	}


	</style>

	</head>
	<body>

	<div class="container">
	<div class="nano">
	<div class="content"><div class="stuff">Hi!</div></div>
	</div>
	<div class="buttons">
	Boo!
	</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="jquery.nanoscroller.js"></script>
	<script>

	$(document).ready(function(){
	var enabled = false;

	var adjustSidebar = function(){
	var parentHeight = $('.content').height();
	var childHeight = $('.stuff').height();

	if (childHeight > parentHeight) {
	if (!enabled) {
	console.log('enabling');
	enabled = true;
	$('.nano').nanoScroller({ preventPageScrolling: true });
	}
	} else {
	if (enabled) {
	console.log('disabling');
	$(".nano").nanoScroller({ stop: true });
	enabled = false;
	}
	}

	};

	$(".nano").nanoScroller({ stop: true });
	adjustSidebar(false);
	$(window).on('resize', 'body', adjustSidebar);
	});



	</script>

	</body>