今天做了一个类似于手机端京东首页的页面,效果图如下:

刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果):

当标题栏滑过轮播图后,透明度就会渐变成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 )的更多相关文章

  1. scroll事件实现监控滚动条并分页显示示例（zepto.js）

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  2. scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )

    今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...

  3. jQuery scroll事件实现监控滚动条分页示例（转）

    这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...

  4. PHP+MySQL分页显示示例分析

    Web开发是今后分布式程式开发的主流,通常的web开发都要涉及到与数据库打交道,客户端从服务器端读取通常都是以分页的形式来显示,一页一页的阅读起来既方便又美观.所以说写分页程序是web开发的一个重要组 ...

  5. JQuery 分页显示jquery-pager-1.0.js

    原版是jquery-pager-1.0.js,经过变更修改加上按照项目中的一些需要修改过来. //初始化分页控件 PagerOptions为配置参数 url为要提交的url地址,如果不需要提交则可以为 ...

  6. PHP+MySQL Smarty简单分页显示示例

    一.分页程序的原理 分页程序有两个非常重要的参数:每页显示几条记录($pagesize)和当前是第几页($page). 有了这两个参数就可以很方便的写出分页程序,我们以MySql数据库作为数据源,在m ...

  7. 利用表格分页显示数据的js组件bootstrap datatable的使用

    前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...

  8. 利用表格分页显示数据的js组件datatable的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. scroll事件的优化以及scrollTop的兼容性

    scrollTop的兼容性 scroll事件,当用户滚动带滚动条的元素中的内容时,在该元素上面触发.<body>元素中包含所加载页面的滚动条. 虽然scroll事件是在window对象上发 ...

随机推荐

  1. 怎么一次性获取form所有的值？rerialize() 、 serializeArray()方法的使用

    from直接提交当然方便,但是有时候需要对数据进行处理再用ajax提交,挨个去获取值未免太麻烦,讲两个一次性获取所有值的方法. 方法1 $("form").serialize(); ...

  2. [IR] String Matching

    BWT KMP Boyer-Moore BWT [IR] BWT+MTF+AC 中已经介绍了BWT (Burrows–Wheeler_transform)数据转换算法, 这种变换方式不仅方便压缩,同时 ...

  3. sleep（）

    sleep() 方法可以使当前线程(即调用该方法的线程)暂停执行一段时间, 让其他线程有机会继续执行, 但它并不释放对象锁: 所以当sleep()方法结束时: 当前线程还是拥有对象锁: 当线程拥有对象 ...

  4. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  5. 如何提取Redis中的大KEY

    工作中,经常有些Redis实例使用不恰当,或者对业务预估不准确,或者key没有及时进行处理等等原因,导致某些KEY相当大. 那么大Key会带来哪些问题呢? 如果是集群模式下,无法做到负载均衡,导致请求 ...

  6. 支付宝即时到账DEMO配置与使用

    支付宝网页即时到账功能,可让用户在线向开发者的支付宝账号支付资金,交易资金即时到账,帮助开发者快速回笼资金. 当用户进行支付操作时候可以直接跳转到支付宝支付页面进行支付 1. 准备 关于支付宝签约即时 ...

  7. Cordova各个插件使用介绍系列（六）—$cordovaDevice获取设备的相关信息

    详情请看:Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息 在项目中需要获取到当前设备,例如手机的ID,联网状态,等,然后这个Cordova里有这个插件可以用, ...

  8. 浅谈Swift和OC的区别

    前言 转眼Swift3都出来快一年了,从OC到Swift也经历了很多,所以对两者的一些使用区别也总结了一点,暂且记录下,权当自己的一个笔记. 当然其中一些区别可能大家都有耳闻,所以这里也会结合自身的一 ...

  9. qmake 提示 Failure to open file:****

    执行qmake时报错,如下图所示: 解决方法: 将***.pro文件夹的属主改为当前用户,具体操作为: 1.切换登录用户为:root 2.#chown -R ies:ies /usr/appsoft ...

  10. 记一次服务器Tomcat优化经历

    公司需要一台测试服务器来做测试用,所以花了几天时间把服务全部部署好,在部署好war包之后,发现Tomcat访问超级慢. 1.进入Tomcat的bin目录下,运行 ./catalina.sh run命令 ...