Skip to content

Instantly share code, notes, and snippets.

@ndiego
Created October 25, 2016 23:38
Show Gist options
  • Save ndiego/234eaf2ac9f9e84de977977e196ef264 to your computer and use it in GitHub Desktop.
Save ndiego/234eaf2ac9f9e84de977977e196ef264 to your computer and use it in GitHub Desktop.
Sticky Block - js + CSS
<script type="text/javascript">
jQuery(document).ready(function($) {
// Only enable when the screen size is large enough for a sidebar
if ( $(window).width() > '1024' ) {
// Fix the block if our scroll position is below the top of the page - 1px to make transition more fluid.
var top = $('.sticky').offset().top - 1;
$(window).scroll(function(e) {
// Get the position of the vertical scroll.
var y = $(this).scrollTop();
if ( y >= top ) {
$('.sticky').addClass('fixed');
} else {
$('.sticky').removeClass('fixed');
}
});
}
});
</script>
<style type="text/css">
.fixed {
position: fixed;
top: 0;
max-width: 360px; /* theme specific */
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment