Skip to content

Instantly share code, notes, and snippets.

@dangerouse

dangerouse/padded_sidebar.html

Created January 10, 2012 04:23
Show Gist options
  • Save dangerouse/1586928 to your computer and use it in GitHub Desktop.
Save dangerouse/1586928 to your computer and use it in GitHub Desktop.
Download ZIP
Fixed sidebar with header boundary using jQuery
Raw
padded_sidebar.html
<!DOCTYPE html>
<html>
<body>
Content that stays put...
<div id="sidebar" style="height:3000px">
<div id="scroller-anchor"></div>
<div id="scrolling-content">
The content that scrolls!
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
jQuery.noConflict();
function moveScroller(anchor, content) {
var moveFunction = function() {
var windowTop = jQuery(window).scrollTop();
var anchorTop = jQuery(anchor).offset().top;
content = jQuery(content);
if (windowTop > anchorTop) {
content.css({position:"fixed",top:"0px"})
} else if (windowTop <= anchorTop) {
content.css({position:"relative",top:""})
}
};
jQuery(window).scroll(moveFunction);
moveFunction();
}
moveScroller("#scroller-anchor", "#scrolling-content");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment