今天做了一个类似于手机端京东首页的页面,效果图如下:
刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果):
当标题栏滑过轮播图后,透明度就会渐变成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{
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----------------------------------------------------------------
这里可以看到,蓝色代码是实现子容器滚动的关键,而橙色代码是实现标题栏透明度渐变的关键代码.
好啦,今天的分享到此结束.(*^__^*)
如果有哪里说得不对的.希望大家可以指出,谢谢!