xScrollStick 跟隨捲軸漂浮的JS特效

最後更新：2013-10-17 來源：互聯網

上載者：User

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

這是一個跟隨捲軸漂浮的JS特效，就是說捲軸滾動而元素相對螢幕位置不變

網上有很多類似的效果，本代碼比較起來有如下優點：

1. 相容IE6.0+ & FF1.5+
2. 使用非常簡單，屬於菜鳥最愛的那種拿來就能用的，見下面說明
3. 元素之間不會起衝突，一頁中可以有n個特效，多元素使用無代碼冗餘

缺點有：

1. 只能在聲明為xHTML的文檔中使用
2. 元素最好放在body下
3. 滾動時不可避免的會有閃爍（已經比較輕微，但追求完美者可能覺得不爽）

使用說明：
在頁面中引用JS包，然後在需要特效的div上設定class為xScrollStick即可，當然不要忘記給每個元素寫上你希望它固定的位置

樣本1：
複製代碼代碼如下:
<div class="xScrollStick" style="left:0px;top:0px">
Content...
</div>

樣本2：
複製代碼代碼如下:
<div class="xScrollStick positionStyleName">
Content...
</div>

示範：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>xScrollStick Demo</title> <style> .xScrollStick{ position:absolute; padding:15px; border:1px solid black; width:120px; height:24px; } .d1 { left:0px;top:0px; } .d2 { right:0px;top:0px; } .d3 { left:0px;bottom:0px; } .d4 { right:0px;bottom:0px; } </style> </head> <body style="text-align:center;"> 俺是浮動條俺是浮動條2 俺是浮動條3 俺是浮動條4 afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需重新整理才能執行]
頁面由兩個個部分組成：
分頁檔：
代碼拷貝框
複製代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>xScrollStick Demo</title>
<script type="text/javascript" src="sp/js/xscrollstick.js"></script>
<style>
.xScrollStick{
position:absolute;
padding:15px;
border:1px solid black;
width:120px;
height:24px;
}
.d1 { left:0px;top:0px; }
.d2 { right:0px;top:0px; }
.d3 { left:0px;bottom:0px; }
.d4 { right:0px;bottom:0px; }
</style>
</head>
<body style="text-align:center;">
<div class="xScrollStick d1">
<a href="http://www.163.com">俺是浮動條</a>
</div>
<div class="xScrollStick d2">俺是浮動條2</div>
<div class="xScrollStick d3">俺是浮動條3</div>
<div class="xScrollStick d4">俺是浮動條4</div>
<div style="top:0px;width:400px;height:2000px;">
afosdhfosdhg<br>
afosdhfosdhg<br>afosdhfosdhg<br>
afosdhfosdhg<br>afosdhfosdhg<br>
afosdhfosdhg<br>afosdhfosdhg<br>
afosdhfosdhg<br>afosdhfosdhg<br>
afosdhfosdhg<br>afosdhfosdhg<br>
afosdhfosdhg<br>
</div>
</body>
</html>

js：
運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>xScrollStick Demo</title> <style> .xScrollStick{ position:absolute; padding:15px; border:1px solid black; width:120px; height:24px; } .d1 { left:0px;top:0px; } .d2 { right:0px;top:0px; } .d3 { left:0px;bottom:0px; } .d4 { right:0px;bottom:0px; } </style> </head> <body style="text-align:center;"> 俺是浮動條俺是浮動條2 俺是浮動條3 俺是浮動條4 afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需重新整理才能執行]
ps:
這一作的技術含量較前兩個更低......沒辦法，JS本來的目的之一就是特效....

本文章原先以中文撰寫並發佈於 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