网上现有代码挺多的,我自己整理了一套。改动起来还算简单,放在滚动监听函数里面执行即可。
有个基本不会出现的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(