(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. Go语言复制文件

    需要使用io包的Copy方法 package main import ( "fmt" "io" "os" ) //自己编写一个函数,接收两个 ...

  2. less编译工具——koala使用介绍

    1:使用koala编译软件    官网:http://koala-app.com/index-zh.html (目前官网点击下载没有反应,有人说可能是网络问题,但真正的原因是需要FQ才能下载了) 百度 ...

  3. git提示error setting certificate verify locations以及fatal: unable to access 的解决办法

    z当使用git ------上传文件到GitHub上时!~~~出现了以下错误  :fatal: unable to access ' 可以采用以下解决方式: 修改GitHub上的地址格式=====ht ...

  4. PHP之ThinkPHP框架(界面)

    Thinkphp框架其精髓就在于实现了MVC思想,其中M为模板.V为视图.C为控制器,模板一般是公共使用类,在涉及数据库时,一般会跟数据表同名,视图会和控制器类里的方法进行名字的一一对应. 下载及配置 ...

  5. Postgresql-模糊匹配大杀器

    # Postgresql-模糊匹配大杀器 ## 问题背景 随着pg越来越强大,abase目前已经升级到5.0(postgresql10.4),目前abase5.0继承了全文检索插件(zhparser) ...

  6. 搭建gitlab本地服务

    一本正经的搞事情 改变懒惰,成就心中的自己,并非难事 博客园 首页 新随笔 联系 管理 订阅 随笔- 40  文章- 0  评论- 5  gitlab服务部署及使用   目录 一.什么是gitlib ...

  7. 【zookeeper】4、利用zookeeper,借助观察模式,判断服务器的上下线

    首先什么是观察者模式,可以看看我之前的设计模式的文章 https://www.cnblogs.com/cutter-point/p/5249780.html 确定一下,要有观察者,要有被观察者,然后要 ...

  8. 在IIS Express中配置和启动web site

    Step 1 进入 C:\Users\[User]\Documents\IISExpress\config . 编辑applicationhost.config文件 加入站点信息如下: Step2:进 ...

  9. shiro 获取请求头中的 rememberMe

    前言: 上一篇提到了, 将 sessionId 放到请求头中去, 那rememberMe是否也可以放到请求头中去呢. 其实不管是sessionId还是rememberMe, shiro都会默认往coo ...

  10. 高性能Mysql笔记 — 优化

    性能优化 了解查询的整个生命周期,清楚每个阶段的时间消耗情况 性能分析 慢查询日志--服务器性能分析 参考 慢查询日志是优化很重要的手段,但是开启慢查询日志对性能的影响并不大,所以可以考虑在线上打开慢 ...