html固定左侧不滑动,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 ,跟随滚动条滚动.

你可以查看博客首页,或者详情页,滑动滚动条查看效果