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

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

当标题栏滑过轮播图后,透明度就会渐变成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>

　　<script src='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 )

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

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

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

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

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

  4. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

  5. “如何稀释scroll事件”的思考(不小心写了个异步do...while)

    看了下园友的一帖子:http://www.cnblogs.com/xzhang/p/4145697.html#commentform 本来以为是很简单的问题,但仔细想想还挺有意思的.简单的说就是增加事 ...

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

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

  7. 扩展jquery scroll事件，支持 scroll start 和 scroll stop

    效果预览: github: https://besswang.github.io/webapp-scroll/ 参考地址: http://www.ghugo.com/special-scroll-ev ...

  8. 如何提高scroll事件的性能

    1. chrome devtool 是诊断页面滚动性能的有效工具 2. 提升滚动时性能,就是要达到fps高且稳. 3. 具体可以从以下方面着手 使用web worker分离无页面渲染无关的逻辑计算 触 ...

  9. jQuery scroll事件

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. $(document).ready(function () { //本人习惯 ...

随机推荐

  1. android通过 Intent 传递类对象

    Android中Intent传递类对象提供了两种方式一种是 通过实现Serializable接口传递对象,一种是通过实现Parcelable接口传递对象. 要求被传递的对象必须实现上述2种接口中的一种 ...

  2. 2018.07.10NOIP模拟 Knapsack（单调队列优化dp）

    Knapsack 题目背景 SOURCE:NOIP2016-RZZ-4 T2 题目描述 有 n 个物品,第 i 个物品的重量为 ai . 设 f(i,j,k,l,m) 为满足以下约束的物品集合数量: ...

  3. Part 1 - Getting Started（1-3）

    https://simpleisbetterthancomplex.com/series/2017/09/04/a-complete-beginners-guide-to-django-part-1. ...

  4. 解决以showModalDialog打开的页面在提交表单时弹出新窗口的问题

    源代码如下: 父页面: window.showModalDialog("../readfile/readFile.jsp","","dialogWid ...

  5. 团队项目（第二周）—GG队

    项目需求规格分析 队员信息 队员 学号 叶尚文(队长) 3116008802 蔡晓晴 3216008808 杜婷萱 3216008809 龙剑初 3116004647 于泽浩 3116004661 项 ...

  6. WC Java 实现

    项目 github 地址 一. 实现情况 基本要求 c 统计文件字符数 (实现) w 统计文件词数 (实现) l 统计文件行数(实现) 扩展功能 s 递归处理目录下符合条件得文件(实现) a 返回文件 ...

  7. mdadm详细使用手册

    1. 文档信息 当前版本 1.2 创建人 朱荣泽 创建时间 2011.01.07 修改历史 版本号 时间 内容 1.0 2011.01.07 创建<mdadm详细使用手册>1.0文档 1. ...

  8. ECG心电图数据1

    最近在写一篇基于小波变换的ECG信号压缩算法的论文,遇到了怎样获取ECG信号测试数据的问题,在百度和专业论坛里搜索了一番,发现也有很多朋友为此发愁.现在论文写好了,投稿中,顺便也把怎样获取和处理ECG ...

  9. Python学习-25.Python中的分数

    在Python中,不止有浮点数(float),而且还有分数(Fraction)这个类型. 要使用分数,必须引入一个模块. import fractions 然后就可以声明一个分数了 x = fract ...

  10. jQuery基础【1】

    jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.jQuery 很容易学习.jQuery 库位于一个 JavaSc ...