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

时间 2019-11-10

标签 scroll 事件实现监控滚动条改变标题栏背景透明度 zepto.js zepto 栏目职业生涯繁體版

原文原文链接

今天作了一个相似于手机端京东首页的页面,效果图以下:css

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

当标题栏滑过轮播图后,透明度就会渐变成1了.web

下面是另外作的一个小demo来展现实现这个效果,同时这里也涉及到滚动条的问题哦!app

由于脱离项目写这个demo的时候,发现写$('.content1').scroll(function () { 代码... });的时候,没有运行里面的代码.this

后来换成$('body').scroll(function () { 代码... });也是同样没有任何反应,个人天,究竟是哪里出了问题???spa

接着想到了document,因而就试着$(document).scroll(function () { 代码... });竟然实现了,但是这样子的话就无法获取到scrollTop了.scala

因此问题出如今滚动事件的触发者这里,那怎么改可让子容器滚动而不是document呢???htm

----------------------------------------------------------------------------这里是代码分割线 Begin--------------------------------------------------------------------blog

<!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----------------------------------------------------------------

这里能够看到,蓝色代码是实现子容器滚动的关键,而橙色代码是实现标题栏透明度渐变的关键代码.

好啦,今天的分享到此结束.(*^__^*)

若是有哪里说得不对的.但愿你们能够指出,谢谢!