学习记录JavaScript|JavaScript(元素偏移,滚动,可视区系列。淘宝右侧固定栏案例，mouseover与mouseenter的区别) html|javascript|css

JSday14
文章目录

JSday14
- 元素偏移量offset系列
- 元素可视区client系列
- 立即执行函数
- 元素滚动scroll系列
- ==案例1==：仿淘宝固定右侧侧边栏
- mouseenter与mouseover的区别

元素偏移量offset系列参考上一章京东放大镜效果
元素可视区client系列通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等。
与offset最大的区别就是不包含边框

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding 内容区的宽度，不含边框，返回的数值不带单位
element.clientHeight	返回自身包括padding 内容区的高度，不含边框，返回的数值不带单位

立即执行函数立即执行函数(function(){})()不需要调用，立马能够自己执行的函数。
【学习记录JavaScript|JavaScript(元素偏移,滚动,可视区系列。淘宝右侧固定栏案例，mouseover与mouseenter的区别)】作用：创建一个独立的作用域，里面所有的变量都是局部变量，不会有命名冲突的情况。
写法：

(function(){})()

(function(a){ console.log(a); })(hello) 第二个小括号可以看做是调用函数传参
(function(){}())

(function sum(a,b){ 可以给函数取名，也可不取 console.log(a+b); }(2.3))

元素滚动scroll系列该系列可以动态得到元素的大小、滚动距离等。内容的大小

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

案例1：仿淘宝固定右侧侧边栏分析:

原先侧边栏是绝对定位（相对于body来定位）
当页面滚动到一定位置时（header部分全部被卷去时），侧边栏改为固定定位
页面继续滚动，会让“返回顶部”显示出来（滚动到main区域时，显示“返回顶部”）

需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document
滚动到某个位置，就是判断页面被卷去的上部值
页面被卷去的头部：可以通过window.pageYOffset获得。如果是被卷去的左侧，则使用window.pageXOffset
注意，元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset

带有动画的返回顶部：此时可以使用封装好的动画函数，只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过window.pageYOffset得到
最后是页面滚动，返回到顶部，滚动窗口至文档中的特定位置，使用window.scroll(x, y)

> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: bisque; }.w { width: 900px; margin: 10px auto; }.header { height: 150px; background-color: purple; }.banner { height: 250px; background-color: skyblue; }.main { height: 1000px; background-color: yellowgreen; }span { display: none; position: absolute; bottom: 0; } class="goBack">返回顶部头部区域 banner区域主体部分 > //1. 获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去头部的大小一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 页面滚动事件 scroll document.addEventListener('scroll', function() { // console.log(11); // window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 banner的顶部的距离此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; }})

mouseenter与mouseover的区别