文档章节

scroll

0000001
 0000001
发布于 2014/06/16 18:36
字数 153
阅读 45
收藏 1

码上生花,ECharts 作品展示赛正式启动!>>>

<!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
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
加载中
请先登录后再评论。
Elasticsearch分页查询

global indexglobal CLIENTindex = "guajibao-ipused-2019.10.13"CLIENT = Elasticsearch(hosts=es_host,port=port,timeout=timeout) def loadalldata(scroll_id): 例子 def loadalldata(sc......

osc_qef6nxve
2019/10/17
0
0
微信小程序scroll-view组件用法集合,包括各种问题和教程

微信小程序scroll-view组件用法集合,包括各种问题和教程,在微信小程序开发过程中,对于使用scroll-view组件有一定参考价值。 scroll-view组件介绍: 可滚动视图区域,属性如下: tip: 请勿...

osc_a7rsiqz6
2018/05/23
42
0
jquery scroll()方法 语法

jquery scroll()方法 语法 作用:当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。scroll() 方法触发 scroll 事件,或规定当...

osc_sa9nsts3
2019/12/03
2
0
Vue项目中使用better-scroll

当 better-scroll 遇见 Vue 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了。 以滴滴为例,可以是这样竖向滚动的列表,如图所示:也可以是横向滚动的导航栏,如图所示: ...

osc_8mn0xdfd
2019/07/25
20
0
Scroll View Programming Guide for iOS 笔记

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

meilidashijie
2013/01/04
524
0

没有更多内容

加载失败,请刷新页面

加载更多

BIO、NIO、AIO、Netty面试题

https://juejin.im/post/5e9421836fb9a03c7b3051bb

JaneRoad
6分钟前
15
0
elementui table缩略图滑过放大图片

html中 <el-table-column prop="qr_image" label="缩略图" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" title="" placem......

大换子
15分钟前
12
0
家谱软件中的循环 - Cycles in family tree software

问题: I am the developer of some family tree software (written in C++ and Qt). 我是一些家庭树软件的开发者(用C ++和Qt编写)。 I had no problems until one of my customers mailed......

javail
17分钟前
19
0
MySQL 多表关联一对多查询取最新的一条数据

SQL语句 SELECT SQL_CALC_FOUND_ROWS* FROMtableA aLEFT JOIN (SELECTBC.* FROM( SELECT MAX( id ) AS cid FROM tableB GROUP BY code ) ACLEFT JOIN tableB B...

珞木橘子
24分钟前
16
0
nacos的启动方式以及注意的点

这个单机模式的启动方式 sh startup.sh -m standalone 注意,必须要加参数,如果不加参数启动了,无法正常访问 如果在用这个命令(sh startup.sh -m standalone)之前直接使用sh startup.sh ,...

千年典韦
34分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部