经常逛淘宝、美团之类网站的朋友们应该都会留意到,在查看一个具体的商品页面时,当滚动条向下滚动时,“宝贝详情”“宝贝评价”所在那个导航元素,会停留在页面的顶部。今天有空,我就思考如何来实现这个功能。百度一下,发现有这样的简洁代码,但是实现的效果不是太流畅,于是稍做改动,最终完美实现。代码如下:
<script src="JS/jquery-1.9.1.min.js"></script>
<script>
$(function() {
var elm = $('#banner');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(elm).css('position',((p) > startPos) ? 'fixed' : 'absolute'); //如果当前页面的顶部位置大于目标元素的顶部位置,那么目标元素的position属性为fixed,否则为absolute
$(elm).css('top',((p) > startPos) ? '0px' : '');
});
});
</script>
<style>
#banner {
background-color: #999;
height:50px;
width:300px;
color:#FFF;
font-size:1