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

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

实现效果如下:

头部的html结构:

 

        
项目优势
        
申请条件
        
办理流程
        
费用清单
        
侨居移民优势
        
国别优势
        
热门资讯
        
精品房源
        
互动专区
        
领取福利
 

页面右侧的html结构

                

                    

                        总费用25万欧元咨询移民顾问
                    
                    

                        

                            
29万欧元
                            费用总览
                        
                        

                            
10-12个月
                            办理周期
                        
                        

                            
无居住要求
                            居住要求
                        
                        

                            
永久居民
                            身份类型
                        
                        

                            
最多六个文字
                            语言要求
                        
                        

                            
无学历要求
                            学历要求
                        
                        

                    
                    
                    

                        
免费评估移民资格
                        

                            
                            
                        
                        
*我们承诺保护您的个人隐私！
                    
                

吸顶效果

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

// 判断浏览器是否支持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--