(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. 小程序开发基础-scroll-view 可滚动视图区域

    小编 / 达叔小生 小程序开发基础-scroll-view 可滚动视图区域 这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为scroll-x,把纵向滚动改为横向滚动即可. scro ...

  2. Liunx服务管理(Centos)

    RPM包安装的服务其安装文件是遵循系统默认安装位置,所以可以通过命令快速启动,但源码包的安装是统一放在一个自定义文件夹下,所有其服务要使用绝对路径,但也可以通过软连接方式,让其支持RPM包相同管理方式 ...

  3. SpringDataJPA与Mybatis的优异性

    首先表达个人观点,JPA必然是首选的. 个人认为仅仅讨论两者使用起来有何区别,何者更加方便,不足以真正的比较这两个框架.要评判出更加优秀的方案,我觉得可以从软件设计的角度来评判.个人对 mybatis ...

  4. 【spring boot】idea下springboot打包成jar包和war包,并且可以在外部tomcat下运行访问到(转)

    转自:https://www.cnblogs.com/sxdcgaq8080/p/7727249.html   接着上一章走呗:http://www.cnblogs.com/sxdcgaq8080/p ...

  5. 【WebAPI】从零开始学会使用.NET Core WebAPI

    介绍 以后会慢慢总结在项目使用中或者学习到的webAPI相关的知识,在这里做记录. 我会从最开始的如何创建WebAPI项目到项目的后续知识一点一点的开始讲述记录. 通过简单有效的方式,让我们能够快速的 ...

  6. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  7. [Java Plasterer] Java Components 3:Java Enum

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Written In The Font Whe ...

  8. API防重放机制

    说说API的防重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击.重放攻击是什么呢?就是把你的请求原封不动地再发送一次,两次...n次,一般正常的请求都会通过验证进入到正常逻辑中,如果 ...

  9. leetcode — first-missing-positive

    /** * * Source : https://oj.leetcode.com/problems/first-missing-positive/ * * Created by lverpeng on ...

  10. oracle12c创建用户提示ORA-65096:公用用户名或角色无效

    1.背景 以前一直用的是oracle11g,创建用户一直没有问题, 今天在oracle12c上创建用户,报错了.如下图: 我很郁闷, 就打开了oracle官方网站找了下, 发现创建用户是有限制的. 2 ...