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;
}

标签: css3 jquery

声明:本博客如无特殊说明皆为原创,转载请注明来源:Jquery实现div固定页面顶部谢谢!

相关文章

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png