吸顶 吸底 效果,方便改动使用,懒人专用

这篇博客分享了一套简洁的前端吸顶吸底效果代码,适用于滚动监听场景。作者强调代码易于改动,适合懒人使用,并指出在处理无限滚动页面时,针对不同屏幕尺寸和div高度进行了优化,减少了调整参数的繁琐工作。评论区欢迎优化建议,共同学习进步。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

网上现有代码挺多的,我自己整理了一套。改动起来还算简单,放在滚动监听函数里面执行即可。

有个基本不会出现的bug,如果有更加优化的代码,可以评论在链接里,互相学习交流。

因为现在很多前端页面都会无限向下加载,比如csdn的博客页面,一直下来会一直加载。

记得之前看csdn的页面右侧吸底效果时候,页面缩放到一定程度后,因为右侧div高度不够,屏幕缩放到一定程度,右侧div一直吸底,顶部就很空,因此多做了几个判断。
现在的页面不会,因为右侧盒子很高很高。

因为这个功能实现起来也不麻烦,就是对不同屏幕、不同div的高度每次都要修改对应参数,对我这种懒人来说很烦。

这段代码就是为了方便懒人取用,因此注释写的很用心,需要改动的参数很少,没有把header和footer的高度参数化,也是因为我懒。

代码如下

var bottomPX;
var leftPx;
var WindowH=parseFloat($(window).height());
var WindowW=parseFloat($(window).width());
var DOMH=parseFloat($(document).height());
//顶部预留高度,预留一般给自己的header插件
var headerH = 80;
//底部预留高度,此预留可以给footer插件
var footerH = 210;
//底部预留高度2,此预留可给footer与悬停块儿之间的空隙。
var footerH2 = 20;
//悬停块儿的高度
var RightH=parseFloat($('.DOM_Right').height());
function rightFixed(){
   
   
    var ScrolTop=parseFloat($(window).scrollTop(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值