• 首页
  • css3
  • css fixed 定位 让局部UI固定 不跟随滚动条移动

css fixed 定位 让局部UI固定 不跟随滚动条移动

css3.png

在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.

css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题

达到的效果

如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化


之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好 所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,漂浮在顶部右侧,不再跟随滚动条移动


简单说,当右侧侧边栏有内容时,跟随滚动条上下移动 当滚动到右侧无内容时,最小边的模块一直漂浮在右上角,如下图

入群讨论 和 订阅公众号 模块始终漂浮在右上角

gd.png

实现原理

先选定你打算让哪个(或者多个)dom 模块漂浮

然后获取到此 模块 相对浏览器顶部的高度

当滚动条滚到高度 == 模块到浏览器顶部的高度时 (说明此时你关注的模块最上边刚刚碰到浏览器最上边,如果继续滚动,就会被隐藏到浏览器上方)

这时把准备漂浮的模块的position 定位更改成 fixed ,top:0

当滚动条逆向向上滚动时,当滚动高度 == 模块到浏览器顶部高度时

再把此模块的 position 更改成 relative ,同时移除 top 属性,让模块跟随滚动条滚动

实现代码

代码依赖 jquery

if($("#connect_me").size()>0){
      var $elm = $('#connect_me');
      var startPos = $elm.offset().top;
      $(window).scroll(function() {
          var p = $(window).scrollTop();
          if( p > startPos-55 ){
              $elm.css({
                  'position': 'fixed',
                  'top': 25,
                  'width':290
              });
          }else{
              $elm.css({
                  'position': 'relative'
              });
          }
      });
  }

if($(“#connect_me”).size()>0)

这句代码你可以忽略,因为的