(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. Linux服务器开机自动启动服务或脚本的方法

    由于种种原因我们需要重启服务器或断电重启,服务都得手动一个一个启动太过麻烦,所以专门了解开机自启脚本的设置方法. 方式一: 直接在脚本/etc/rc.d/rc.local(和/etc/rc.local ...

  2. GCC的__attribute__ ((constructor))和__attribute__ ((destructor))

    通过一个简单的例子介绍一下gcc的__attribute__ ((constructor))属性的作用.gcc允许为函数设置__attribute__ ((constructor))和__attrib ...

  3. 如何解决git====push 过程中出现的。error: failed to push some refs

    当我们在利用git  push 文件到仓库时出现了一下问题: ! [rejected] master -> master (fetch first)error: failed to push s ...

  4. SVN密码找回 完美方案

    问题背景 SVN(Subversion)版本管理工具.本文以Windows操作系统下使用SVN的场景. 长时间不使用SVN,可能会出现忘记了SVN密码的尴尬局面.那么,该如何找回SV密码呢? 处理思路 ...

  5. web容器 web服务器 servlet/jsp容器 之间的区别和关系

    今天学习tomcat时发现一篇写的比较好的文章,故分享给大家 Web服务器(软件): Apache http server, 这个它的网址,http://httpd.apache.org/downlo ...

  6. 利用max-height适应多尺寸屏幕的下拉动画

    移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性.比如我们要制作以下动画:红框2为详细内容,默认收起:红框1处为事件响应热区,点击后展开或收起红框2的 ...

  7. 微信小程序内嵌业务域名内的网页

    微信小程序在2017年11月左右开放了内嵌网页的功能,即新组件<web-view>.官方文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/com ...

  8. LAMP环境快速搭建

    1.安装httpd [root@localhost httpd]# yum -y install httpd #安装httpd [root@localhost httpd]# chkconfig ht ...

  9. k8s网络之calico

    一.概述 前面我们部署calico由于集群规模不是很大,使用的是calico的bgp模式的node-to-node-mesh全节点互联,这种模式在小规模集群里面还可以用,3.4.0版本的calico支 ...

  10. Jenkins结合.net平台工具之Nuget

    我们刚刚通过msbuild在Jenkins环境下把一个控制台项目生成exe可执行文件,如果我们引用了nuget包,也能够正常生成,但是我们知道,我们在把项目提交到git或者svn上的时候并不包含这些包 ...