文档章节

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
React全家桶构建一款Web音乐App实战3

接着上一节内容,这一节抓取QQ音乐移动Web端推荐页面接口和PC端最新专辑接口数据。通过这些接口数据开发推荐页面。首先看一下效果图 页面结构 推荐页面主要分轮播和最新专辑两块,其中轮播图...

sinat_17775997
2017/12/22
0
0
针对于vue,关于better-scroll实现滑动的小细节

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

lovewt
2017/12/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx防盗链、访问控制、Nginx解析PHP相关配置、Nginx代理

Nginx防盗链 在配置文件里写入以下内容: 用curl测试 访问控制 Nginx限制某些IP不能访问或者只允许某些IP访问。 配置文件写入如下内容: allow 表示允许访问的IP,deny限制访问的IP。 匹配正...

黄昏残影
12分钟前
0
0
自己动手实现RPC服务调用框架

转载 TCP的RPC 引言 本文利用java自带的socket编程实现了一个简单的rpc调用框架,由两个工程组成分别名为battercake-provider(服务提供者)、battercake-consumer(服务调用者)。 设计思路...

雨中漫步的鱼
15分钟前
0
0
Centos6.x安装之后的9件事

Centos6.x安装之后的9件事 这些不是必须都做的,只不过是我个人的习惯,在此记录一下。 1.修改yum源到国内 CentOS系统更换软件安装源 备份你的原镜像文件,以免出错后可以恢复。 mv /etc/yu...

叶云轩
20分钟前
5
0
springboot2 使用jsp NoHandlerFoundException

开发图片上传功能,为验证测试功能是否正常,使用JSP编写表单提交进行测试 开发完成后,请求API提示如下异常: No mapping found for HTTP request with URI [/WEB-INF/jsp/avatar_upload.j...

showlike
26分钟前
0
0
springboot踩坑记--springboot正常启动但访问404

一 spring boot的启动类不能直接放在main(src.java.main)这个包下面,把它放在有包的里面就可以了。 二 正常启动了,但是我写了一个controller ,用的@RestController 注解去配置的controlle...

onedotdot
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部