jq吸顶条

最新推荐文章于 2022-11-23 11:41:14 发布

plaisir_simple

最新推荐文章于 2022-11-23 11:41:14 发布

阅读量400

点赞数

分类专栏： jq事件

本文链接：https://blog.csdn.net/weixin_44889798/article/details/89601297

版权

jq事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天写一个小例子，jq吸顶条

//先布局，布局其是非常简单
<body style="height:3000px">
 <div>dsferdtgrtgtrgtgrtgtret</div>
         <div>dsferdtgrtgtrgtgrtgtret</div>
          <div>dsferdtgrtgtrgtgrtgtret</div>
        <div id="box"></div>`//给盒子一个宽和高
        <div>dsferdtgrtgtrgtgrtgtret</div>
          <div>dsferdtgrtgtrgtgrtgtret</div>  
</body>

接下来就写css样式

<style type="text/css">
    *{
        margin:0px;
        padding:0px;
        list-style: none;
    }
    #box{
        width:100%;
        height:40px;
        background: red;
        left:0px;   
    }
    </style>

接下来就可以使用jquery写了

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        var a = $(box).offset().top;//盒子元素距离页面顶端的距离
      $(window) .scroll(function() {//给window加事件
           var b = $(window).scrollTop();//滚动条相对于浏览器顶端的距离
           //当滚动的屏幕距离大于等于盒子本身离最顶端的距离时（判断条件）给它加样式
           if(b>=a){
                $(box).css({"position":"fixed","top":"0"});
           }else{
                $(box).css({"position":""});
           }
        });
    })
 </script>

可能解释的不是很好，以后会好好的组织一下语言的。

plaisir_simple

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq吸顶条

最近正在复习之前学过的知识，所以刚好做到这个小例子这里，就给大家来写一下吸顶条//先布局，布局其是非常简单<body style="height:3000px"> <div>dsferdtgrtgtrgtgrtgtret</div> <div>dsferdtgrtgtrgtgrtgtret</div> ...
复制链接

扫一扫