为了项目的制作,需要一个导航栏置顶的效果,遇到了点难度,但还是克服了,通过比较导航和滚动条的高度实现置顶效果
<div id="daohang" style="100%;height: 80px; background: black; top: 0px; left: 0px;color: white;text-align: center;position: absolute;">123</div>
<script type="text/javascript">
$(function(){
//引入id标签;
var navtive=$("#daohang");
//设置导航标签为置顶;
var offsetTop=navtive.offset().top;
//定义一个监听高度;
var scrollHeight=$(document).scrollTop;
fn(navtive,offsetTop);
//设置监听事件;
$(window).scroll(function(){
fn(navtive,offsetTop);
});
//调用方法;
function fn(navtive,offsetTop){
var scrollHeight=$(document).scrollTop();
if(offsetTop>scrollHeight){
navtive.css("top",offsetTop);
}else{
navtive.css("top",scrollHeight);
}
}
});
</script>