scroll
博客专区 > 0000001 的博客 > 博客详情
scroll
0000001 发表于3年前
scroll
  • 发表于 3年前
  • 阅读 34
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Listen Scroll</title>

</head>


<body>

<style type="text/css">

body{

height:5000px;

}

.section{

height:1500px;

}

.c{

height:400px;

}

.anchor{

border-bottom:1px solid dimgray

}

.offset{

padding:10px;

color:#fff;

background:red;

}

.offset.active{

left:0; top:0;

position:absolute;

}

</style>


<div class="section">

<div class="c"></div>

<div class="offset">我浮动啦~~~</div>

<div class="anchor">

请滚动到这里

</div>

</div>


<script type="text/javascript" src="../scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$.fn.extend({

listenScroll: function(options){

if( !this.length ){

return;

}

options = options || {}

,options.className = options.className || 'active';

var win = $(window), targets = $(this), offsetTops = [];

$.each(targets, function(i, target){

target = $(target);

offsetTops.push( target.offset().top );

});

win.scroll(function(){

var scrollTop = win.scrollTop();

$.each(targets, function(i, target){

target = $(target);

var offsetTop = offsetTops[i];

if( scrollTop > offsetTop ){

target.addClass(options.className).css('top', scrollTop);

}

else{

target.removeClass(options.className).css('top', 0);

}

});

});

}

});


$('.offset').listenScroll({

className: 'active'

});

</script>

</body>

</html>


共有 人打赏支持
粉丝 36
博文 140
码字总数 46256
×
0000001
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: