Jquery实现div固定页面顶部
实现顶部固定功能,不管怎么滚动,固定某div一直在顶部显示。
第一种方法:
<!--顶部固定-->
//下列.header代表要固定在顶部的样式,请自行修改
<script src="jquery.min.js"></script>
<script>
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".header").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".header").css({"position":"fixed","top":0,"left":"0px","margin-left":"0px"});
}else if(scroH<navH){
$(".header").css({"position":"static","margin":"0 auto"});
}
})
})
</script>
第二种方法:
使用CSS:直接用fixed定位,也能达到此效果。
.header{
position:fixed;top:0px;
}