Jquery on scroll 事件
AJframe-簡單執行on scroll 滑鼠滾動事件
常常在閱覽網站時發現當我們執行滾動後,會出現一些漂亮的事件~這邊就來教你怎樣做這樣的判斷～
首先我們引用Jquery
<script language="JavaScript" type="text/javascript" src="js/jquery-1.12.2.js"></script>接下來我們可以寫入以下的案例來演示
onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 50) {
do something//
} else {
do something//
}
這邊我們使用了scrollTop來做動作,宣告了在這function裡面,scrollTop去依據元素body的scrollTop 來做動作.如果捲軸滾動大於 50px,去執行 if 裡面的事件
否則就執行 else裡的事件
alert試試看
onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 50) {
alert('on');
} else {
do something//
}
執行看看,當我們捲動超過50px 高度時,是不是就彈出一個視窗顯示on了呢?再加點效果試試
onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 50) {
$('p').hide();
} else {
$('p').show();
}
在body裡面新增加標籤:
<body>
<div class="warp">
<p>hello!</p>
</div>
</body>
在css 裡面我們給warp一個暫時的高度,好讓你能產生捲軸做測試
.warp { height:2000px;}
執行看看~捲軸滾動50px後p是不是就不見了!再往回滾動後,p是不是就出現了！
更進一步應用我們可以參考 animation Header教學
留言
張貼留言