文档章节

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
粉丝 34
博文 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
21、分类详情页之better-scroll实现滚动

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

Ewall_
08/16
0
0
针对于vue,关于better-scroll实现滑动的小细节

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

lovewt
2017/12/25
0
0
微信小程序 scroll-view实现锚点滑动

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

TokenYang
2017/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS配置Tomcat监听80端口,虚拟主机

Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [root@test-a ~]# vim /usr/local/tomcat/conf/server.xml # 找到 Connector port="8080" protocol="HTTP/1......

野雪球
今天
5
0
《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
今天
3
0
java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
今天
4
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0
ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部