今天做了一個類似於手機端京東首頁的頁面,效果圖如下:
刷新頁面的時候,標題欄(也就是搜索欄),背景是透明的,當我們往下滑的時候,可以改變標題欄的背景透明度(漸變效果):
當標題欄滑過輪播圖后,透明度就會漸變成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----------------------------------------------------------------
這里可以看到,藍色代碼是實現子容器滾動的關鍵,而橙色代碼是實現標題欄透明度漸變的關鍵代碼.
好啦,今天的分享到此結束.(*^__^*)
如果有哪里說得不對的.希望大家可以指出,謝謝!