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

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

当标题栏滑过轮播图后,透明度就会渐变成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. python脚本 随机定位坐标

    import mathimport randomdef rad(dg):    return (dg * math.pi / 180)def deg(rd):    return (rd * 180 ...

  2. JAVAEE学习——struts2_02：结果跳转方式、访问servletAPI方式、获得参数以及封装和练习:添加客户

    一.结果跳转方式 <action name="Demo1Action" class="cn.itheima.a_result.Demo1Action" m ...

  3. 上下文Context详细介绍

    1.先看看它的继承结构,下图可以看出Context首先是一个抽象类,继承了Object,Activity,Service,Application都继承了它 2.API中对它的描述: @1Context ...

  4. iOS开发之常用资讯类App的分类展示与编辑的完整案例实现(Swift版)

    上篇博客我们聊了<资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0)>,今天的这篇博客就在上篇博客的基础上做些东西.做一个完整的资讯类App中的分类展示 ...

  5. memcached配置

    首先是安装libevent库,执行如下的命令 tar vzxf libevent-2.0.21-stable.tar.gz cd libevent-2.0.21-stable ./configure ...

  6. 添加OpenStack Mitaka源

    sudo apt-get install ubuntu-cloud-keyring sudo add-apt-repository cloud-archive:mitaka 同理,可以添加其它版本,如 ...

  7. 微信 python 接口 -- itchat 文档

    itchat 一. 安装 $ pip install itchat 特殊的字典使用方式 通过打印 itchat 的用户以及注册消息的参数, 可以发现这些值都是字典. 但实际上 itchat 精心构造了 ...

  8. Python 第八章笔记

    第八章总结 8.5. heapq - 堆队列算法 有8个算法 方法 heappush heappop heappushpop heapreplace heapify merge nlargest ns ...

  9. Owl Carousel幻灯片插件的使用

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...

  10. 【转载】Sublime Text 3065 Keygen and Patcher

    原始日期:2014-10-01 18:25      差不多时隔一年了,Sublime Text 终于更新啦!相信很多友友都已经升级到3065版本了,所以我也特地抽空为大家做了个新版补丁.该补丁仅作为 ...