javascript跟隨滾動效果外掛程式代碼（javascript Follow Plugin）

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章介紹了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</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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More