[TOC] # 3.1元素scroll系列属性 (真正内容的大小 (包括文字扩张的具体大小)) scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 | scroll系列属性 | 作用 | | --- | --- | | element.scrollTop | 返回被卷去的上侧距离,返回数值不带单位 | | element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 | | element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 | | element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |  ## scroll滚动事 件当我们滚动条发生变化会触发的事件 ~~~ <script> // scroll 系列 var div = document . querySelector('div' ); console.log(div.scrollHeight); console.log(div.clientHeight); // scroll滚动事 件当我们滚动条发生变化会触发的事件 div.addEventL istener( 'scroll', function() { console.log(div.scrollTop); }) </script> ~~~ # 3.3页面被卷去的头部兼容性解决方案  需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法: 1.声明了DTD ,使用document.documentElement.scrol1Top 2.未声明DTD,使用document.body.scrollTop 3.新方法window.pageYoffset和window.pagexoffset , It9开始支持  ## 解决兼容性方案 ~~~ function getscroll() { return { left: window . pagexoffset | document . documentElement . scrollLeft I | document . body . scrollLeftl 10, top: window. pageyoffsetII document . documentElement. scrollTop | document. body. scrollTop I 0 }; 使用的时候 getscroll ().left ~~~ # 案例:仿淘宝固定右侧侧边栏 ## 案例需求 1.原先侧边栏是绝对定位 2.当页面滚动到一定位置,侧边栏改为固定定位 3.页面继续滚动,会让返回顶部显示出来 ## 案例分析  ## 代码实验 页面代码 ~~~ <div class=" slider-bar" > span class=”goBack" >返回项部</ span> </div> <div class-"header w”>头部区域</div> <div class=" banber w"> banner区域</div> div class="main w" >主体部分</div> <script > //1获取元素 var sliderbar = document.querySelector(' .slider-bar'); var banber = document.querySelector(' .banber ); //banber.offsetTop就是被减去头部的大小 var bannerTop = banber.offsetTop; //当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop ; console.log(sliderbarTop); //获取main的主体元素 var main = document.querySelector(" .main' ); var goBack = document.querySelector( ' . goBack ' ); var mainTop = main.offsetTop; //2 .页面滚动事件 document.addEventListener( ' scroll' , function() { //console.log(11); //window. pageYoffset页面被减去的头部 //console.log(window. pageYoffset); /13.当我们页面被减去的头部大于等于了310此时侧边栏就要改为固定定位 if (window. pageYOffset >= bannerTop) { sliderbar.style.position = ' fixed '; sliderbar.style.top = sliderbarTop + 'px° ; } else { sliderbar.style.position ='absolute' ; sliderbar.style.top = '460px' ; //4.当我们页面滚动到main盒子，就显示 goBack盒子 if (window.pageYoffset >= mainTop){ goBack. style.display = 'block'; } else { goBack. style.display = 'none '; } }) </script> ~~~ css 样式 ~~~ *{ margin: 0; } .slider-bar { position: absolute; top: 470px; right: 100px; background-color:口salmon; height: 150px; width: 50px; font-size: 18px; } . goBack { display: inline -block; width: 100%; height: 50px; margin-top: 100px; background-color:口seagreen; } .slider-bar span { display: none; } .w { width: 1600px; margin: 0 auto; } . header { height: 300px; background-color:■pink; } . banber { margin-top: 10px ; height: 300px; background-color:■powderblue; } . main { margin- top: 10px ; height: 1000px; background-color:口rebeccapurple; } ~~~