Wednesday, July 4, 2012

Stick div at top after scrolling


<style>
#sticky {
  background-color: #fff;
  -moz-border-radius: 0.5ex;
  -webkit-border-radius: 0.5ex;
  border-radius: 0.5ex;
  color: #000;
  font-size: 2em;
  padding: 0.5ex;
  width: 600px;
  }
#sticky.stick {
  -moz-border-radius: 0 0 0.5em 0.5em;
  -webkit-border-radius: 0 0 0.5em 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  position: fixed;
  top: 0;
  z-index: 10000;
  }
</style>
</div>

<!-- If you have jQuery directly, then skip next line -->
<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('#sticky').addClass('stick')
  else
    $('#sticky').removeClass('stick');
  }
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>


Source From: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

No comments:

Post a Comment