吸顶条
1.现获取元素的绝对位置;
2.在滚动的事件,获取滚动的高度,判断滚动的高度大于等于元素的绝对位置时,元素设置固定定位,反之为静态的
3.设置一个相同的div元素,当固定定位的时候显示,反之隐藏;
js部分:
<script type="text/javascript" src='jq1.7.2/jquery.js'></script>
<script type="text/javascript">
$(function () {
// 先获取div向上的绝对位置
var top = $('div').offset().top;
console.log(top);
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop >= top) {
// 让吸顶条的position:fixed;显示替代的条
$('div').eq(0).css('position','fixed');
$('#bar').show();
} else {
$('div').eq(0).css('position','static');
$('#bar').hide();
}
});
})
</script>
css部分:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 50px;
font-size: 30px;
line-height: 50px;
text-align: center;
background: #ccc;
left: 0;
top: 0;
}
#bar {
display: none;
}
</style>
html部分:
<h1>明天</h1>
<h1>明天</h1>
<h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1><h1>明天</h1>
<h1>嘿嘿</h1>
<div>后天的内容</div>
<div id='bar'></div>
<h1>哈哈1</h1>
<h1>哈哈2</h1>
<h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1><h1>后天</h1>