欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript跟随滚动效果插件代码(javascript Follow Plugin)_javascript技巧

程序员文章站 2022-06-01 14:29:47
...
Js 跟随滚动效果插件
支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
支持定义滚动到底部的最小高度,不会覆盖底部
页面大小resize后,插件会自动重置参数
=======
Js 跟随滚动效果插件
1.支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
2.支持定义滚动到底部的最小高度,不会覆盖底部
3.页面大小resize后,插件会自动重置参数
=======
使用方法
代码如下
复制代码 代码如下:


window.onload = function(){
var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
new Follow({
obj:followIds,
bottom:150
});
}

完整实例
代码如下
复制代码 代码如下:





Js Follow




Header




使用方法:

1.载入插件,在页面载入之后,window.onload = function(){}

2.创建需要跟随的对象的数组,比如 var followIds = [document.getElementById("follow"),document.getElementById("follow2")];

3.初始化Follow:new Follow();

4.传参,obj是对象数组,bottom是滚动块距离底部的最小的高度





window.onload = function(){
var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
new Follow({
obj:followIds,
bottom:150
});
}















跟随滚动
模块1


跟随滚动
模块2