Js 跟随滚动效果插件
支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
支持定义滚动到底部的最小高度,不会覆盖底部
页面大小resize后,插件会自动重置参数
=======
Js 跟随滚动效果插件
1.支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
2.支持定义滚动到底部的最小高度,不会覆盖底部
3.页面大小resize后,插件会自动重置参数
=======
使用方法
<script type=text/javascript src=follow.js></script>
/**
* 跟随滚动效果
*
* @param
* @arrange (编程之家) jb51.cc
**/
window.onload = function(){
var followIds = [document.getElementById(follow),document.getElementById(follow2)];
new Follow({
obj:followIds,bottom:150
});
}
完整实例:
<!DOCTYPE html>
<html>
<head profile=http://gmpg.org/xfn/11>
<Meta charset=UTF-8>
<title>Js Follow跟随滚动效果</title>
<style>
html,body{width:100%;margin:0;padding:0;}
div{padding:0;margin:0;text-align:center;font-size:40px;font-weight:bold;color:#fff;}
.clear:after{content:;display:block;height:0;clear:both;visibility: hidden;overflow:hidden;}
.clear{*zoom:1;}
.wrap{width:1000px;margin:0 auto;}
.header{width:100%;background:#1BA1E2;height:200px;line-height:300px;}
.footer{width:100%;background:#666;height:150px;line-height:100px;}
.content{width:100%;margin:0 auto;background:#aaa;}
.left{width:70%;float:left;background:#8CBF26;}
.text{padding:50px;text-align:left;word-break:break-all;line-height:36px;font-size:16px;font-weight:normal;}
.right{width:30%;float:left;}
.aside{padding:10px 0px;margin-top:50px;background:#F09609;width:300px;height:150px;}
.aside2{padding:10px 0px;background:#DB4F33;}
</style>
</head>
<body>
<div>
<div>Header</div>
<div class=content clear>
<div>
<div>
使用方法:<br/>
1.载入插件,在页面载入之后,window.onload = function(){}<br/>
2.创建需要跟随的对象的数组,比如 var followIds = [document.getElementById(follow),document.getElementById(follow2)];<br/>
3.初始化Follow:new Follow();<br/>
4.传参,obj是对象数组,bottom是滚动块距离底部的最小的高度<br/>
<hr/>
<pre style=word-break:break-all;word-wrap:break-word;width:600px;>
<script type=text/javascript src=follow.js></script>
window.onload = function(){
var followIds = [document.getElementById(follow),document.getElementById(follow2)];
new Follow({
obj:followIds,bottom:150
});
}
</pre>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div>
<div id=follow>
跟随滚动<br/>模块1
</div>
<div id=follow2>
跟随滚动<br/>模块2
</div>
</div>
</div>
<div>Footer</div>
</div>
<script type=text/javascript src=follow.min.js></script>
<script>
window.onload = function(){
var followIds = [document.getElementById(follow),bottom:150
});
}
</script>
</body>
</html>
<!-- 来自 编程之家 jb51.cc (jb51.cc)-->
原文地址:https://www.jb51.cc/js/527782.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。