上下限-板块浮动插件

最新推荐文章于 2023-02-10 17:08:04 发布

i0vv0i

最新推荐文章于 2023-02-10 17:08:04 发布

阅读量264

点赞数

文章标签：浮动上下浮动插件上下限-板块浮动插件

本文链接：https://blog.csdn.net/qq_37780279/article/details/76333314

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jquery-3.2.1.min.js"></script>          <!--必要:  引入jquery-->
    <style>     /*测试css*/
        *{  margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
        header{  width: 100%;height: 150px;}
        .body{  border: 1px solid #000;height: 3000px; }
        footer{  width: 100%;height: 100px;}
        .float div{  height: 100%; width: 200px; background-color: rgba(255,5,5,.3);  } /*浮动节点的子孙元素css*/
    </style>
</head>
<body>
    <header></header>
    <div class="body">
        <div class="float">
            <div>
                <h1>名称:  上下限浮动封装</h1>
                <h3>用法:  使用dom节点引用插件[浮动区域的宽高为窗口宽高]</h3>
                <p >备注:  引用的节点在jquery中已经写好css,只需要对其子孙元素添加css</p>
                <p >备注:  插件的浮动范围在父级容器范围内,父级会自动添加最小高度为窗口高度</p>
                <h6>必要:  注意引入jquery</h6>
            </div>
        </div>
    </div>
    <footer></footer>
</body>
</html>
<script>
    (function () {
        $.fn.float = function () {      var fn = this;  var par = this.parent();     //开发者: 刘武星
            this.css({display:'block',position:'fixed',width:'100%',height:'100%',overflow:'hidden',visibility:'collapse'});   //当前css
            this.children().css('visibility','visible');        //子级显示
            $(window).resize(function () {                      //窗口事件
                $(par).css({'min-height':$(fn).height()});       //父元素最小高度
                $(fn).css({top:$(par).offset().top});
            });$(window).resize();
            $(window).scroll(function () {                      //滚动事件
                var min = $(par).offset().top,max = (min+$(par).height())-$(fn).height(),do_t = $(document).scrollTop();    //变量 上限-下限-当前
                if(do_t<min){ $(fn).css('top',min-do_t);}
                else if(do_t>max){ $(fn).css('top',max-do_t); }
                else{ $(fn).css('top','0'); }
            });$(window).scroll();
        }
    })(jQuery);

    $('.float').float();	//引用插件
</script>

i0vv0i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上下限-板块浮动插件

html>lang="en"> charset="UTF-8"> src="../jquery-3.2.1.min.js"> /*测试css*/ *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; bo
复制链接

扫一扫