开发者学堂课程【移动 Web 前端开发：js 功能-搜索效果】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8413
js功能-搜索效果
基本内容
一、 搜索效果程序的准备工作
二、 滚动页面的设计
一、 搜索效果程序的准备工作
1、此时已经新建好了一个 index.js,已经把 index.js引入到了 index.html中，
/** ITCAST WEB ...*/
window . onload = function() {
//在 window . onload 执行一些页面的初始化功能，
2、初始化页面功能
（1）、/*搜索*/
search（）；
（2）、/*轮播图*/
banner（）；
（3）、/*倒计时*/
downTime（）；
}
// 如果将这三个功能的代码写在一块,将会影响初始化页面的阅读。 影响对功能模块的变量定义。 如果都写在一起，大的方面的问题肯定是没有的，但是会有一点微小的影响， 此时调用一些方法。
3、代码
var search = function ( ) {
l search 的功能：（三个需求）
（1）、页面初始化的时候，距离顶部为0的时候，透明度是0。
Ø 问：页面的颜色是十六进制的颜色。如果要改变顶部的透明度，但是页面里的内容不受影响，该怎么操作？
答：使用 rgba 颜色转换。（网络上有很多转换工具），找到对 应的代码后去index.js 更换背景颜色。
Ø 接着看一下 rgba 的数值，拿到的颜色可以去 PSP 里面做转化，或者在网络上搜索“rgba 颜色转化”-将颜色的代码复制到“rgba 颜色转化”中，可将十六进制颜色码转换成 RGB 颜色值。
·jd_search.jd_search_boxf
width: 100%;
height: 40px;
max -width: 640px;
min-width: 320px;
margin: 0 auto;
background: rgba(216, 80,92,0.85);
//第四个为透明度
position: relative
刷新之后可以看到透明度，如下图所示：
（2）、当页面滚动的时候，离页面顶部的距离会逐渐变大，透明度递增。
此时会监听到页面的滚动， 如果不监听就不会发现页面顶部的距离逐渐变大。
因此当完成第二个需求的时候就开始准备监听页面滚动的视角。 但是监听完页面滚动的视角之后， 到底要操作哪些元素？也必须要知道。
Ø 问：如果要达到页面的滚动， 该操作哪些元素？
答：获取 dom 元素
var search = document . querySelector('.jd_search_box');
//此时就算成功的拿到了 search；
//'.jd_search_box就是页面中间的内容
var banner = document . querySelector(' .jd_ banner');
//.jd_ banner：banner 容器
//问：需要 banner 容器的目的是什么？
答：需要将它的宽度计算出来；或者是把它的高度拿出来。
/*距离范围*/
//获取高度的代码：
var height = banner . offsetHeight ;
（3）、当滚动的距离超过的轮播图的距离的时候，保持不变。
}
var banner = function(){
}
var downTime = function(){
}
以上都是该程序的准备工作；
二、 滚动页面的设计
1、如果要操作以上程序，那么就需要在滚动页面进行设计，接下来就需要监听滚动事件；
监听滚动事件（此时必须在监听到页面滚动的时候才会触发）
window.onscronll = function( ) {
//在监听到页面滚动的时候才会触发
console.log(‘scronll’);
//当滚动的时候，轮播在 console 没有打印出来, 说明以 上的程序这个方法根本没有执行；
问：为什么没有打印出来？
答：因为在程序设计里禁用了 Disable JavaScript；
禁用当前页面的 Disable JavaScript。
当勾选掉这个禁用的时候；刷新页面的时候，轮播在 console 打印出来,一个“1”。 滚动页面的时候“ scronll’”也被打印出来了。
2、已经监听到了当前页面滚动，那么接下来需要做什么？离页面顶部的距离会逐渐变大，透明度递增。
问：所以说透明度和什么有关系？
答： 与页面顶部的距离有关系。
问： 怎样获取当前页面与顶部的距离呢？
var top = document.body.scropllTop
// 这是页面与顶部的距离，也是滚动了多少的距离。
//当前页面滚动的距离
// 这种写法是谷歌的方式
需要记住
var top = document . documentElement . scrollTop;
/*ie 的写法*/
//现在是在做移动端开发， 一般来讲是和谷歌的操作方法一样的， 现在需要使用的是第一种谷歌的写法，只需要记住第二种方法 ie 的写法就可以了。 ie 的程序开发和现在的程序开发没有一点关系。
3、当页面滚动的距离完成之后，需要与高度进行比较；
var opacity = 0;
// 这是默认的透明度；
if ( top > height ) {
/*3.当滚动的距离超过了轮播图的距离的时候保持不变*/
// 如果出现 top 大于 height 的情况, 这个时候就需要上面标题（一、搜索效果的准备工作）--（3、代码）--（Search 的功能）--（3）、当滚动的距离超过的轮播图的距离的时候，保持不变。
opacity = 0.85;
// 当滚动的距离超过了轮播图的高度时，这个opacity数值就应该固定； 保持这个透明度。
} else {
//正常的任务情况
/*2.当页面滚动的时候随者 页面距离顶部的距离变大透明度变大*/
//其他情况下，要取一个距离作为定值； 那么距离要怎样变换呢？
答：应该有个比例。
//0.85 是一个最大的透明度， 假设 页面在没有滚动的时候，有一个透明度是200 ， 那么滚动到一半的时候透明度就变为了100， 100÷200等于 0.5 ， 那么此时透明度也应该变成原来的一半，即透明度为0. 85*(top/height);
opacity = 0. 85*(top/height);
}
// 对于页面的滚动有两种情况： 第一种 是滚动在轮播图一下了；
第二种 依然在轮播图上面滚动；
//在轮播图一下滚动透明度保持不变， 在轮播图那滚动透明度逐渐变大； 但是这个变大和滚动的距离有关系。
当透明度设置完成以后接下来就要给搜索盒子设置颜色。
4、设置颜色给搜索盒子
search. style. background = ‘raga(216,80,92,’ +opacity+’)’
//设置盒子的透明度； 透明度在之前已经设置好了，现在只需要将透明度放上去就可以了。 这样搜索盒子的颜色就设置好了。
滚动监听的目的就是为了设置当前的透明度， 那么给当前的搜索盒子加上这个透明度就可以了， 那么这个透明度是怎样变化的呢？
当大于轮播图高度的时候， 透明度保持不变。
当在轮播图高度范围以内的时候， 需要按照一个滚动的距离成正比的关系， 然后再计算透明度，
5、程序完成之后 随着页面的高度的下拉, 搜索区域的透明度也越来越深。
