判断浏览器是否兼容position:sticky属性,并实现jQ

目前有些浏览器不支持position: sticky属性,并且safair浏览器不用版本支持度也有所区别(12.1的貌似不支持,但是11.多的又可以...)

实现效果如下:

头部的html结构:

 <ul class="purchase_immigration_alink  init_top">
        <li><a href="#mao_youshi">项目优势</a></li>
        <li><a href="#mao_tiaojian">申请条件</a></li>
        <li><a href="#mao_liucheng">办理流程</a></li>
        <li><a href="#mao_qingdan">费用清单</a></li>
        <li><a href="#mao_yimyoushi">侨居移民优势</a></li>
        <li><a href="#mao_guobieyous">国别优势</a></li>
        <li><a href="#mao_zixun">热门资讯</a></li>
        <li><a href="#mao_fangyuan">精品房源</a></li>
        <li><a href="#mao_hudong">互动专区</a></li>
        <li><a href="#mao_fuli">领取福利</a></li>
 </ul>

页面右侧的html结构

<!-- 页面右侧 -->
                <div class="purchase_immigration_right fl init_top">
                    <div class="news_happening">
                        总费用<span>25</span><i>万欧元</i><a href="#">咨询移民顾问<i></i></a>
                    </div>
                    <ul>
                        <li>
                            <p>29万欧元</p>
                            费用总览
                        </li>
                        <li>
                            <p>10-12个月</p>
                            办理周期
                        </li>
                        <li>
                            <p>无居住要求</p>
                            居住要求
                        </li>
                        <li>
                            <p>永久居民</p>
                            身份类型
                        </li>
                        <li>
                            <p>最多六个文字</p>
                            语言要求
                        </li>
                        <li>
                            <p>无学历要求</p>
                            学历要求
                        </li>
                        <div class="cb"></div>
                    </ul>
                    <!-- 评估 -->
                    <div class="evaluation_qualification">
                        <h6>免费评估移民资格</h6>
                        <div class="input_text">
                            <input type="text" placeholder="姓名：（选填）">
                            <input type="text" placeholder="手机：（必填）">
                        </div>
                        <p><span>*</span>我们承诺保护您的个人隐私！</p>
                    </div>
                </div>

吸顶效果 当子元素到达父元素底部取消吸顶

// 判断浏览器是否支持sticky 属性
        var sticky = (function () {
                var vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
                    vendorListLength = vendorList.length,
                    stickyElement = document.createElement('div');
                for (var i = 0; i < vendorListLength; i++) {
                    stickyElement.style.position = vendorList[i] + 'sticky';
                    console.log('stickyElement',stickyElement)
                    if (stickyElement.style.position !== '') {
                        return true;
                    }
                }
                return false;
            })();

  // 设置元素的fiexd属性
            function divFixedTop (ele,top) {
                let scrollTop = $(window).scrollTop() + top;  //滚动条的位置加上当前元素的fixed的top值(用来动态设置fixed的top值的触发点)
                let parentTop = $(ele).parent().height() + $(ele).parent().offset().top;   //获取当前元素的父元素距离文档的top值加上父元素的高度(用来限制子元素在父元素的底部活动范围)
                let eleRelativePosition = $(ele).parent().height() - $(ele).height(); //获取fixed后子元素在父元素里面的活动范围(超出则改变子元素的fixed属性为relative,并赋值给子元素的relative的top上)
                let thisTop = $(ele).data("top");  //获取当前元素存储在元素属性当前的top值 
                let margin_top = $(ele).data("margin-top").slice(0,$(ele).data("margin-top").length - 2);  //获取当前元素存储在元素dom属性上的margin-top值并截取掉除px的值
                let left = $(ele).offset().left;  //获取元素静态时距离页面左边的偏移量,用来设置fixed的left值
                if (scrollTop >= thisTop - margin_top) {
                    $(ele).css({
                        'position': 'fixed',
                        'bottom': 'auto',
                        'margin-top': '0px',
                        'top': top + 'px',
                        'left': left + 'px'
                    })
                } else if (scrollTop <= thisTop + margin_top){
                    $(ele).css({
                        'position': 'static',
                        'margin-top': margin_top + 'px',  //精确fixed的top值
                        'top': '',
                        'left': ''
                    })
                }
                if ((parentTop - $(ele).height()) <= scrollTop) {
                    $(ele).css({
                        'position': 'relative',
                        'margin-top': '0px',
                        'top': eleRelativePosition,
                        'left': ''
                    })
                }
            };

获取sticky 用来判断浏览器是否支持sticky css属性如果不支持就监听页面滚动事件并调用封装的divFixedTop 方法

//如果当前浏览器兼容position: sticky,属性就返回
            if (sticky) {
                return;
                // 否则就动态js设置元素的fixed触发值
            } else {
                //每次滚动就监测调用divViewHeight()方法,判断是否到达触发点
                $(window).on('scroll',function() {
                    divFixedTop('.purchase_immigration_alink',0);  
                    divFixedTop('.purchase_immigration_right',70);
                    divFixedTop('.interactive_welfare_right',70); 
                })
            }

目前市面上多数浏览器可以兼容stickt属性,但是还是存在不兼容问题(包括同一个浏览器的不同版本),所以已上代码可以解决目前已知所有浏览器的兼容stickt属性问题(其实是不兼容的就动态设置fixed属性超出父元素高度就取消fixed,从而模拟sticky属性)

--over--