滾動事件,指的是當滾動條位置發生改變時觸發的事件。滾動事件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動畫”之後,我們再來給大家回顧一下這個回頂部特效,並且給這個特效添加用戶體驗更加好的動畫效果。