DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 5.5 滾動條的距離scrollTop()和scrollLeft()
5.5 滾動條的距離scrollTop()和scrollLeft()
編輯:jQuery基礎知識     

當一個元素的實際高度(或寬度)超過其顯示區域的高度(或寬度)時,在一定設置下,浏覽器會為該元素顯示相應的垂直滾動條(或水平滾動條)。我們在 學習網的在線代碼測試工具就經常看到滾動條效果:

在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(),表示獲取滾動條距離浏覽器窗口頂部的距離。

上面這個例子的開發技巧非常重要。我們常見到的回頂部特效、下拉固定特效等,其實就跟這個技巧有關,記得好好琢磨一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved