當一個元素的實際高度（或寬度）超過其顯示區域的高度（或寬度）時，在一定設置下，浏覽器會為該元素顯示相應的垂直滾動條（或水平滾動條）。我們在 學習網的在線代碼測試工具就經常看到滾動條效果：
在jQuery中，我們可以使用scrollTop()來獲取或設置元素相對於垂直滾動條頂部的距離，可以使用scrollLeft()來獲取或設置元素相對於水平滾動條左部的距離。
語法：
$().scrollTop() //獲取滾動距離 $().scrollTop(value) //設置滾動距離
說明：
scrollLeft()方法的用法跟scrollTop()方法一樣。
scrollTop()和scrollLeft()獲取的值是一個數字（不帶單位），這個跟height()、width()是一樣的。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{height:1800px;}
#box1,#box2
{
display:inline-block;
width:100px;
height:100px;
}
#box1
{
background-color:Red;
}
#box2
{
background-color:Orange;
position:fixed;
}
</style>
<script type="text/javascript" src="App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
//獲取box2距離頂部的距離
var top = $("#box2").offset().top;
//根據滾動距離判斷定位
$(window).scroll(function () {
//當滾動條距離大於box2距離頂部的距離時，設置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//當滾動條距離小於於box2距離頂部的距離時，設置相對定位
else {
$("#box2").css({ "position": "relative" });
}
});
})
</script>
</head>
<body>
<div id="box1"></div><br />
<div id="box2"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
原理非常簡單，當滾動條距離大於box2距離頂部的距離時，設置固定定位；當滾動條距離大於box2距離頂部的距離時，設置固定定位。
$(window).scroll(function () {
//滾動事件代碼
}
上面這段代碼表示“滾動條的滾動事件”。我們在後續課程中“jQuery事件”這一章會詳細講解，在這裡我們只需要了解一下即可。$(this).scrollTop()中的this指的是window，等價於$(window).scrollTop()，表示獲取滾動條距離浏覽器窗口頂部的距離。
上面這個例子的開發技巧非常重要。我們常見到的回頂部特效、下拉固定特效等，其實就跟這個技巧有關，記得好好琢磨一下。