jQuery scroll捲動事件 - tw511教學網

捲動事件，指的是拉動頁面捲軸時所觸發的事件。捲動事件非常有用，特別是在“回頂部特效”以及“扁平化頁面動畫”中會大量用到。

在 jQuery 中，我們可以使用 scroll() 方法來表示捲動事件。

語法：

$().scroll(function(){
……
})

scroll() 方法經常配合 scrollTop() 方法一起使用。其中，scrollTop() 方法之前我們已經詳細介紹過了。

舉例：固定欄目

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <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 src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(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>

預覽效果如圖 1 所示。

圖 1：固定欄目的效果