文档章节

scroll

0000001
 0000001
发布于 2014/06/16 18:36
字数 153
阅读 45
收藏 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>


© 著作权归作者所有

共有 人打赏支持
0000001
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
Scroll View Programming Guide for iOS 笔记

1.ScrollView通过拖动或者轻弹实现scroll不需要子类或者代理。只有UIScrollView的content size需要通过程序设置,其他都能用Interface Builder设置 2.只需要少量的额外配置ScrollView就能达到...

meilidashijie
2013/01/04
0
0
自己写了一个滑动门插件,但是在一个页面上无法处理多个效果

麻烦js高手帮忙看看: 插件是这个: var akulubala = { "init":{"speed":1000, "direction":"bottom",//direction "mode":"fitful",//scroll mode durative or fitful "id":"akulubalascrol......

akulubala_
2013/03/03
362
4
针对于vue,关于better-scroll实现滑动的小细节

今天项目组给了一个项目给我,并且使用better-scroll实现上下滑动的效果,对此总结一些细节 1.在vue里面使用better-scroll,首先要下载这个包,可以使用npm inatall better-scroll或者cnpm in...

lovewt
2017/12/25
0
0
21、分类详情页之better-scroll实现滚动

前言:本章主要是讲下better-scroll组件库的基本运用; Github:https://github.com/Ewall1106/mall(请选择分支chapter21) 1、什么是better-scroll? better-scroll 是一款重点解决移动端(...

Ewall_
08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
今天
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部