文档章节

scroll

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

<!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
博文 140
码字总数 46256
作品 0
朝阳
前端工程师
Scroll View Programming Guide for iOS 笔记

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

meilidashijie ⋅ 2013/01/04 ⋅ 0

针对于vue,关于better-scroll实现滑动的小细节

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

lovewt ⋅ 2017/12/25 ⋅ 0

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

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

akulubala_ ⋅ 2013/03/03 ⋅ 4

单行文字滚动

function AutoScroll(obj){ $(obj).find("li:first").animate({ marginTop:"-36px" },500,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } $(function(......

0000001 ⋅ 2014/06/17 ⋅ 0

Elasticsearch 2.20 滚动查询请求

在Elasticsearch中,一次查询只能得到一次独立的结果,在分页中这是很不方便的,当用Elasticsearch进行第n页查询的时候,Elasticsearch内部是查询了从n页的所有数据,只是在返回的时候抛弃了...

赛克蓝德 ⋅ 2016/02/16 ⋅ 0

微信小程序 scroll-view实现锚点滑动

前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在...

TokenYang ⋅ 2017/11/09 ⋅ 0

React全家桶构建一款Web音乐App实战3

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

sinat_17775997 ⋅ 2017/12/22 ⋅ 0

使用CSS来美化你的javafx滚动条

ScrollBar parts CSS information In the above picture there are four main part of ScrollBar . increment thumb track decrement Now in this post we are going to just play with only......

东北·赵本山 ⋅ 2015/01/13 ⋅ 4

三张Imageview实现无限图片轮播

第一部分 原理思路 如下图: 第二部分 代码部分: // Created by 妖精的尾巴 on 15-8-24. // Copyright (c) 2015年 妖精的尾巴. All rights reserved. // #import "ViewController.h" #defin...

不孤独的美食家 ⋅ 2015/08/25 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 23分钟前 ⋅ 0

Cube的构建过程

Cube 的构建方式有两种:全量构建和增量构建。两者的构建过程完全一样,区别在于构建时读取的数据源是全集还是子集。 Cube的构建步骤: 1.创建临时的 Hive 平表(从 Hive 读取数据)。 2.计算...

无精疯 ⋅ 28分钟前 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 31分钟前 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 45分钟前 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

Hive函数

1.函数explode (一转多) create table hive_wc(sentence string); load data local inpath '/home/hadoop/data/hive-wc.txt' into table hive_wc; 结果: hive > select * from hive_wc; ......

GordonNemo ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部