<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