Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
当前位置: 网站首页 > 网站建设教程 >
jquery获取滚动条位置函数和方法
<style>
.div1, .div2{ width:300px; height:150px; background:#A81A1C; margin-bottom:300px; color:ffffff; font-size:30px;}
.action{ background:#E4C212; position:relative; animation: myfirst 1s infinite alternate;}
@keyframes myfirst
{
0% { left:0px; top:0px;}
100% { left:100px; top:0px;}
}
</style>
<script src="http://www.web-phoenix.net/templets/default/images/js/jquery.js"></script>
<script>
$(document).scroll(function(){//滚动条事件
scrollbar();//获取滚动条高度
})
$(function(){//网页打开事件
scrollbar();//获取滚动条高度
})
function scrollbar(){//获取滚动条位置函数
var $scroll = $(document).scrollTop();//获取文档滚动条top位置
var div1 = $(".div1").offset().top - 300;//获取div1元素位置
var div2 = $(".div2").offset().top - 300;//获取div2元素位置
if( $scroll > div1 ){
$(".div1").addClass("action");
//增加Class
}else{
$(".div1").removeClass("action");
//移除Class
}
if( $scroll > div2 ){
$(".div2").addClass("action");
//增加Class
}else{
$(".div2").removeClass("action");
//移除Class
}
}
</script>
<div class="div1">div1</div>
<div class="div2">div2</div>
【jquery获取滚动条位置函数和方法热度：192】 【更多网站建设教程】