Monday, January 16, 2012

Floating block using JQuery

You can create a fixed div, floating while scrolling page, using JQuery. The simple code is shown below:

<script type='text/javascript'>
  $(function() {
  var fixed = $("#left_fixed_div");  
  var offset = fixed.offset();
  var topPadding = 15;
  $(window).scroll(function() {
  if ($(window).scrollTop() > offset.top) {
    fixed.stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
  }
  else {
    fixed.stop().animate({marginTop: 0});
  };});
});
</script>

You can see this code in action on this site. Site's floating menu organized with it.

0 comments:

Post a Comment