网站制作一条龙服务_网站百度排名优化推广(seo)服务_【凤凰网络】

当前位置: 网站首页 > 网站建设教程 >

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】 【更多网站建设教程
Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
凤凰网络:提供优质的网站制作一条龙服务,并通过百度网站排名优化推广(seo)服务,使seo优化后的网站,获得快速网站关键词排名提升到首页的效果!