DIV CSS 佈局教程網

7.6 滾動事件
編輯:jQuery基礎知識     

滾動事件,指的是當滾動條位置發生改變時觸發的事件。滾動事件very very有用,在“回頂部特效”以及現在扁平化網頁中的動畫中大量涉及到,當然我們 學習網也不例外。

語法:

 
$().scroll(fn)

說明:

參數fn表示事件處理函數,也就是function(){}。

scroll()滾動事件常常和scrollTop()和scrollLeft()這兩個方法結合使用。在之前的章節,我們已經給大家詳細講解過scrollTop()和scrollLeft()這兩個方法了。

舉例:固定欄目

在線測試
 
<!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距離頂部的距離時,設置固定定位。

這個技巧非常好用,常用於固定某個欄目。像 學習網文章右側的某個固定欄目就是用這種方法來實現。

舉例:回頂部特效

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            height:1800px;
        }
        #back-to-top
        {
            position:fixed;
            right:50px;
            bottom:50px;
            display:none; /*設置默認情況下元素為隱藏狀態*/
            width:40px;
            height:40px;
            color:white;
            background-color:#45B823;
            font-family:微軟雅黑;
            font-size:15px;
            font-weight:bold;
            text-align:center;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /*根據滾動距離判斷按鈕是否顯示或隱藏*/
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $("#back-to-top").css("display","inline-block");
                }
                else {
                    $("#back-to-top").css("display","none");
                }
            });
            /*實現點擊滾動回頂部*/
            $("#back-to-top").click(function () {
                $("html,body").scrollTop(0);
            });
        })
    </script>
</head>
<body>
    <div id="back-to-top">回到頂部</div>
</body>
</html>

在浏覽器預覽效果如下:

當我們拖動滾動條一段距離(300px)之後,預覽效果如下:

分析:

當我們拖動滾動一段距離(300px)之後,“回到頂部”按鈕會出現,然後點擊按鈕之後,我們就實現了回到頂部效果,此時按鈕也會消失。

這就是我們常見的“回頂部特效”。代碼其實很簡單,小伙伴們一定要好好琢磨實現思路。在學習了下一章“jQuery動畫”之後,我們再來給大家回顧一下這個回頂部特效,並且給這個特效添加用戶體驗更加好的動畫效果。

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