这篇文章介绍了javascript跟随滚动效果插件代码（javascript Follow Plugin），有需要的朋友可以参考一下
Js 跟随滚动效果插件
支持定义多个跟随ID，采用css fixed属性，不支持ie6，兼容其他主流浏览器。
支持定义滚动到底部的最小高度，不会覆盖底部
页面大小resize后，插件会自动重置参数
=======
Js 跟随滚动效果插件
1.支持定义多个跟随ID，采用css fixed属性，不支持ie6，兼容其他主流浏览器。
2.支持定义滚动到底部的最小高度，不会覆盖底部
3.页面大小resize后，插件会自动重置参数
=======
使用方法

<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

});

}

完整实例

<!DOCTYPE html>

<html lang="zh-CN">

<head profile="http://gmpg.org/xfn/11">

<meta charset="UTF-8">

<title>Js Follow跟随滚动效果--www.jbxue.com</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 class="wrap">

<div class="header">Header</div>

<div class="content clear">

<div class="left">

<div class="text">

使用方法：<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 class="right">
<div class="aside" id="follow">
跟随滚动<br/>模块1
</div>
<div class="aside2" id="follow2">
跟随滚动<br/>模块2
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="follow.min.js"></script>
<script>
window.onload = function(){
var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
new Follow({
obj:followIds,
bottom:150
});
}
</script>
</body>
</html>

javascript跟随滚动效果插件代码（javascript Follow Plugin）的更多相关文章

  1. fullPage教程 -- 整屏滚动效果插件 fullpage详解

    1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...

  2. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  3. Jquery 文字上下滚动效果示例代码

      <!doctype html>   <html>   <head>   <meta charset="utf-8">       ...

  4. jq无缝滚动效果插件（之前的那个升级改造加强版）

    scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置 ...

  5. 图片流滚动效果html代码(复制)

    <!doctype html> <html> <head>     <meta charset="utf-8" />     < ...

  6. jquery 滚动效果插件

    1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } ...

  7. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  8. ［ios］新手笔记－。－UIPickerView 关于伪造循环效果和延时滚动效果

    查找了网上资料,循环效果绝大部分都是增加行数来制造循环的错觉,延时滚动就是利用NSTimer间隔出发滚动事件来制造滚动效果. 代码: #import <UIKit/UIKit.h>#imp ...

  9. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Mysql 环境配置查询

    Mysql 环境查询 1, 查看全部的引擎 a) Show engines 或者是进入到information_schama里面去查看ENGINES表 2, 查看当前用户 a) Select user ...

  2. socket编程—— 服务器遇到Broken Pipe崩溃

    我写了一个服务器程序, 在Linux下测试时, 总是莫名退出. 最后跟踪到是write调用导致退出. 用gdb执行程序, 退出时提示"Broken pipe". 最后问题确定为, ...

  3. poj 2135 (基础费用流)

    题意:从1到n再到1,每条边只能走一次,求最短距离. 建图:每条边只能走一次就是流量是1,添加源点与1相连,容量为2,费用为0,n与汇点相连容量为2,费用为0: 求增广路用SPFA最短路求,, #in ...

  4. Java从零开始学二十三(集合Map接口)

    一.Map接口 Collection.Set.List接口都属于单值的操作,即:每次只能操作一个对象,而Map与它们不同的是,每次操作的是一对对象,即二元偶对象,Map中的每个元素都使用key à v ...

  5. C++使用hiredis连接带密码的redis服务

    c = redisConnect((char*)redis_host, redis_port); if (c->err) { /* Error flags, 0 when there is no ...

  6. HDU 3974 Assign the task（dfs时间戳+线段树成段更新）

    题意:给定点的上下级关系,规定假设给i分配任务a.那么他的全部下属.都停下手上的工作,開始做a. 操作 T x y 分配x任务y,C x询问x的当前任务: Sample Input 1 5 4 3 3 ...

  7. eclipse 导入tortoiseSVN检出项目，不显示svn信息（eclipse安装svn插件）

      eclipse 导入tortoiseSVN检出项目,不显示svn信息(eclipse安装svn插件) CreateTime--2018年5月10日14:10:35 Author:Marydon 1 ...

  8. eclipse 将javaWeb项目转化成maven项目

      eclipse 将javaWeb项目转化成maven项目 CreateTime--2018年4月18日16:04:18 Author:Marydon 1.首先,maven项目的标准目录 2.web ...

  9. 8、java内部类

    一.基本介绍 内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. 内部类可以是静态static的,也可用public,default,protected和private修饰:而外部顶级 ...

  10. ACM遇到的问题与解决方案

    C++防止栈溢出措施: 只要在你的代码里加上下面这句话, OK,栈溢出直接搞定!!! #pragma comment(linker, "/STACK:102400000,102400000& ...