Skip to content

Instantly share code, notes, and snippets.

@hellosteadman
Created August 14, 2015 22:55
Show Gist options
  • Save hellosteadman/3f39720bb45246be7a8e to your computer and use it in GitHub Desktop.
Save hellosteadman/3f39720bb45246be7a8e to your computer and use it in GitHub Desktop.
Smooth floating sidebar
jQuery(document).ready( function() { / ... All my other theme setup calls ... /
var topbar = jQuery('#wpadminbar').size() > 0 ? jQuery('#wpadminbar').height() : 0;
var sidebar = jQuery('#sidebars');
var startOffset = sidebar.parent().offset().top;
var offsetY = parseInt(sidebar.parent().css('padding-top'));
var offsetX = sidebar.position().left + sidebar.parent().position().left;
jQuery(window).scroll(
function() {
sidebar.stop();
var start = jQuery(document).scrollTop() + topbar > startOffset;
var further = sidebar.offset().top + topbar > startOffset;
var taller = sidebar.outerHeight() > jQuery(window).height();
if((start || further) && !taller) {
var newpos = (jQuery(document).scrollTop() - startOffset + offsetY);
if (jQuery(document).scrollTop() < startOffset) {
sidebar.css(
{
position: 'static',
left: 'auto',
top: 'auto'
}
);
} else {
sidebar.css(
{
position: 'fixed',
left: offsetX,
top: offsetY + topbar
}
);
}
} else {
sidebar.css(
{
position: 'static',
left: 'auto',
top: 'auto'
}
);
}
}
);
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment