css fixed 定位 让局部UI固定 不跟随滚动条移动
文章目录
在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.
css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题
达到的效果
如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化
之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好
所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,漂浮在顶部右侧,不再跟随滚动条移动
简单说,当右侧侧边栏有内容时,跟随滚动条上下移动
当滚动到右侧无内容时,最小边的模块一直漂浮在右上角,如下图
入群讨论 和 订阅公众号 模块始终漂浮在右上角
实现原理
先选定你打算让哪个(或者多个)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)
这句代码你可以忽略,因为的 javascript代码压缩 到了一个js文件中.
而首页 和 详情页都有不同的dom 模块实现漂浮,所以这里先判断 有没有此 dom (jquery 判断有没有此 jquery 对象)
如果 dom 存在,那就继续执行
var startPos = $elm.offset().top; 计算出 dom 距浏览器顶部的高度
$(window).scroll(function() { 然后开始监听 浏览器滚动条事件
if( p > startPos-55 ){ 当滚动条滚动高度== dom 距离浏览器顶部距离 - 55 像素时
这里的55 像素,是因为我的顶部菜单栏也是固定定位,为了不挡住右侧漂浮的 dom 模块,所以减掉了 菜单栏的高度
$elm.css({ 'position': 'fixed' 修改模块的定位属性为 fixed
else (当滚动条逆向滚动回来时) 再把 position 属性修改为 relative ,跟随滚动条滚动.