(function($) {
    var DNG = {};
    //----------------------------------------------------/
    // 相对父级元素fixed
    //----------------------------------------------------/
    DNG.parentFixed = function() {
        // 获得需要fixed定位的元素
        var el =$(".parent-fixed");
        // 判断是否存在
        if( el.length > 0){
            el.each(function(){
                let $this = $(this);
                // 输入header为absolute或fixed定位的高度
                var headerFixed = 50 ;
                // 获得元素相关数据
                function getdata(ele){
                    // 获取父级元素 父级元素定位 父级元素高度
                    ele.parentOffset = ele.offsetParent();
                    ele.parentOffsetY = ele.parentOffset.offset().top - headerFixed;
                    ele.parentHeight = ele.parentOffset.height();
                    // 获取元素定位 元素高度
                    ele.oldPositionY = ele.positionY = ele.position().top;
                    ele.Height = ele.height();
                    // 计算元素滑动最大值 = 父级元素定位 + 父级元素高度 - 元素定位 - 元素高度
                    ele.maxScroll = ele.parentOffsetY + ele.parentHeight - ele.positionY - ele.Height;
                    return ele;
                }
                $this = getdata($this);
                // 窗口改变触发事件
                $(window).resize(function(){
                    // 更新元素相关数据
                    $this = getdata($this);
                });
                
                // 滑动触发事件
                $(window).scroll(function(){
                    $this.Scroll = $(window).scrollTop();
                    // 判断1:小于父级元素定位
                    // 判断2:大于父级元素定位,小于滑动最大范围
                    // 判断3:大于滑动最大范围
                    if( $this.Scroll < $this.parentOffsetY ){
                        $this.positionY = $this.oldPositionY;
                    } else if( $this.Scroll >= $this.parentOffsetY && $this.Scroll <= $this.maxScroll ){
                        // 计算元素Top定位,滑动距离 - 父级元素定位 + 元素定位
                        $this.positionY = $this.Scroll - $this.parentOffsetY + $this.oldPositionY;
                    } else{
                        $this.positionY = $this.maxScroll - $this.parentOffsetY + $this.oldPositionY;
                    }
                    // 改变元素定位
                    $this.css("top",$this.positionY);
                });
            });
        }
    };
    //----------------------------------------------------/
    // end
    //----------------------------------------------------/
    $(document).ready(function() {
        DNG.parentFixed();
    });
})(jQuery);

[jQuery]相对父级元素的fixed定位的更多相关文章

  1. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  2. 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

  3. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

  4. js和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx ...

  5. jquery获取父级元素、子级元素、兄弟元素的方法

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  6. jquery获取父级元素、子级元素、兄弟元素

    1:$(this).parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...

  7. jQuery使用(四):DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  8. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  9. css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

随机推荐

  1. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  2. 站点的rel="alternate"属性

    概述 今天看决战平安京官网源码,突然看到了rel的alternate属性,百度了一下,记录下来,供以后开发时参考,相信对其他人也有用. PC端rel 在pc版网页上,添加指向对应移动版网址的特殊链接r ...

  3. table-layout引起的探索——fixed和auto的区别

    问题:最近想把mui提供的底部导航组件样式单独抽出来,遇到一个问题:给底部图片下的文字设置了超出隐藏,但没有生效,如下图: 注:该底部导航为mui提供的组件 解决:这让我百思不得其解,经过一些琢磨后发 ...

  4. python 输入一个字符串,打印出它所有的组合

    import itertools str = input('请输入一个字符串:') lst = [] for i in range(1, len(str)+1): lst1 = [''.join(x) ...

  5. vue-manage-system 后台管理系统开发总结

    前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k st ...

  6. 基于redis的分布式锁实现

    1.分布式锁介绍 在计算机系统中,锁作为一种控制并发的机制无处不在. 单机环境下,操作系统能够在进程或线程之间通过本地的锁来控制并发程序的行为.而在如今的大型复杂系统中,通常采用的是分布式架构提供服务 ...

  7. Java网络编程的Java流介绍

    前言 网络程序所做的很大一部分工作都是简单的输入输出:将数据字节从一个系统移动到另一个系统.Java的I/O建立于流(stream)之上.输入流读取数据,输出流写入数据.过滤器流(filter)流可以 ...

  8. 第7章 Linux上配置RAID

    7.1 RAID概念 RAID独立磁盘冗余阵列(Redundant Array of Independent Disks),RAID技术是将许多块硬盘设备组合成一个容量更大.更安全的硬盘组,可以将数据 ...

  9. ZooKeeper系列(6):ZooKeeper的伸缩性和Observer角色

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk 1.ZooKeeper中的角色 在比较老的ZooKeeper版本 ...

  10. 基于stm32的水质监测系统项目基础部分详细记录

    基于stm32的水质监测系统项目基础部分详细记录 软件环境:MDK5 硬件环境:STM32F103ZET6 开发板.颜色传感器.串口屏.串口打印机 搭建工程模板 在进行项目软件的撰写时,首先新建一个基 ...