发布：2024/12/7 22:43:19作者：管理员 来源：本站 浏览次数：67

目前有些浏览器不支持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属性)