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>事件