Jquery - 顶部固定代码

目录

实现顶部固定功能,不管怎么滚动,固定某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定位,也能达到此效果,但。。。

```css
    .header{
        position:fixed;top:0px;
    }

文章最后编辑时间为:2017-08-14 12:46:13

标签: css3 jquery

声明:本博客如无特殊说明皆为原创,转载请注明来源:Jquery - 顶部固定代码谢谢!

相关文章

发表评论:

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