scroll事件实现监控滚动条并分页显示示例(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下:
刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果):
当标题栏滑过轮播图后,透明度就会渐变成1了.
下面是另外做的一个小demo来展示实现这个效果,同时这里也涉及到滚动条的问题哦!
因为脱离项目写这个demo的时候,发现写$('.content1').scroll(function () { 代码... });的时候,没有运行里面的代码.
后来换成$('body').scroll(function () { 代码... });也是一样没有任何反应,我的天,到底是哪里出了问题???
接着想到了document,于是就试着$(document).scroll(function () { 代码... });居然实现了,可是这样子的话就没法获取到scrollTop了.
所以问题出现在滚动事件的触发者这里,那怎么改可以让子容器滚动而不是document呢???
----------------------------------------------------------------------------这里是代码分割线 Begin--------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
* {
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%; /*必须要设html和body的高度*/
}
header{
width: 100%;
height: 2.2rem;
line-height: 2.2rem;
background: rgba(0,173,176,0);
text-align: center;
position: fixed;
}
.content1 {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.content1 .img {
height:8rem;
line-height: 8rem;
background: #0894EC;
text-align: center;
}
.content1 .box {
height: 50rem;
background: #EFEFEF;
}
</style>
</head>
<body>
<header>标题栏</header>
<div class="content1">
<div class="img">
假装这里是轮播图
</div>
<div class="box">
这里是好多好多的内容
</div>
</div>
<!--以下是引用SUI框架js文件代码-->
<script src='../dist/js/zepto.min.js'></script>
<script>
$('.content1').scroll(function () {
var contentH = $(this).get(0).scrollHeight; // 所要滑动的元素内容的高度
var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的距离
var containerH = $('.img').height()+44; // 图片的高度
if(scrollTop>0 && scrollTop <= containerH){
var a = scrollTop / containerH;
$('header').css('background','rgba(0,173,176,'+a+')');
}
});
</script>
</body>
</html>
--------------------------------------------------------------------这里是代码分割线 End----------------------------------------------------------------
这里可以看到,蓝色代码是实现子容器滚动的关键,而橙色代码是实现标题栏透明度渐变的关键代码.
好啦,今天的分享到此结束.(*^__^*) 嘻嘻……
本人刚踏入前端这个坑不久.......
如果有哪里说得不对的.希望各路大神指出,谢谢!
scroll事件实现监控滚动条并分页显示示例(zepto.js )的更多相关文章
- scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
- jQuery scroll事件实现监控滚动条分页示例(转)
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
- PHP+MySQL分页显示示例分析
Web开发是今后分布式程式开发的主流,通常的web开发都要涉及到与数据库打交道,客户端从服务器端读取通常都是以分页的形式来显示,一页一页的阅读起来既方便又美观.所以说写分页程序是web开发的一个重要组 ...
- JQuery 分页显示jquery-pager-1.0.js
原版是jquery-pager-1.0.js,经过变更修改加上按照项目中的一些需要修改过来. //初始化分页控件 PagerOptions为配置参数 url为要提交的url地址,如果不需要提交则可以为 ...
- PHP+MySQL Smarty简单分页显示示例
一.分页程序的原理 分页程序有两个非常重要的参数:每页显示几条记录($pagesize)和当前是第几页($page). 有了这两个参数就可以很方便的写出分页程序,我们以MySql数据库作为数据源,在m ...
- 利用表格分页显示数据的js组件bootstrap datatable的使用
前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...
- 利用表格分页显示数据的js组件datatable的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- scroll事件的优化以及scrollTop的兼容性
scrollTop的兼容性 scroll事件,当用户滚动带滚动条的元素中的内容时,在该元素上面触发.<body>元素中包含所加载页面的滚动条. 虽然scroll事件是在window对象上发 ...
随机推荐
- "php-cgi.exe - FastCGI 进程意外退出" 解决办法
问题描述: win7下iis中php-cgi.exe - FastCGI 进程意外退出 错误提示: HTTP 错误 500.0 - Internal Server Error D:\phpStudy\ ...
- Xmpp学习之Android-smack入门指导
Xmpp学习之Android-smack入门指导 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com/cavalier-/p/69404 ...
- c++概括
c++到底是什么样的语言 在过去的几十年,计算机技术的发展令人吃惊,当前的笔记本电脑的计算速度和存储信息的能力超过了20世纪60年代的大型机.20世纪七十年代,C和Pascal语言引领人们进入结构化编 ...
- Catalog Service - 解析微软微服务架构eShopOnContainers(三)
上一篇我们说了Identity Service,因为其基于IdentityServer4开发的,所以知识点不是很多,今天我们来看下Catalog Service,今后的讲解都会把不同的.重点的拿出来讲 ...
- Sublime常用插件
注:此插件为我自己在用的,仅代表个人,如果发现好用的插件,会不断更新此博文. 1,package control 我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安 ...
- 【基础】C#异常处理的总结
一.异常处理的理解? 异常处理是指程序在运行过程中,发生错误会导致程序退出,这种错误,就叫做异常. 因此处理这种错误,就称为异常处理. 二.异常处理如何操作? C# 异常处理时建立在四个关键词之上的: ...
- 链表插入和删除,判断链表是否为空,求链表长度算法的,链表排序算法演示——C语言描述
关于数据结构等的学习,以及学习算法的感想感悟,听了郝斌老师的数据结构课程,其中他也提到了学习数据结构的或者算法的一些个人见解,我觉的很好,对我的帮助也是很大,算法本就是令人头疼的问题,因为自己并没有学 ...
- 搭建rtmp直播流服务之2:使用java实现ffmpeg命令接口化调用(用java执行ffmpeg命令)
欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) 一.环境搭建 1.安装ffmpeg 下载对应系统的ffmpeg安装包,个人采用windows平台进行开发,所以安装了windo ...
- 不完全翻译:Threading in C#-Getting Started
Introduction(引入,介绍) and Concepts(概念) 原文地址:http://www.albahari.com/threading/ 注:水平有限不能全文翻译,备注了个别字段和短句 ...
- django 自定义过滤器(filter)处理较为复杂的变量的实例
简述:django 在views中有数据需要通过字典(dict)的方式传递给template,该字典中又包含了字典,而且字典中的键值还是一个对象,在template中处理传递过来的数据的时候,字典不能 ...