js当像显示窗口移动到指定位置,开始固定显示
2018年10月24日话不多说直接上源代码,花了我20分钟写出来的东西好好保存
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script> /** * 获取元素顶部绝对位置的方法 * @param element * @returns {number | *} */ function getElementTop(element) { var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null) { actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; } /** * 获取元素左边绝对位置的方法 * @param element * @returns {number | *} */ function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } var box = document.getElementsByClassName('float-advertisement'); //定义一个变量用来获取需要浮动的元素 /** * 监听滚动事件 */ document.addEventListener('scroll', function () { //监听整个屏幕的滚动事件 var visibleTop = window.scrollY; //显示窗口顶部的线 for (var i = 0; i < box.length; i++) { var centerY = getElementTop(box[i]); //获取这个元素的顶边距 var centerX = getElementLeft(box[i]); //获取这个元素的左边距 if (box[i].getAttribute('data-initial-top') != undefined) { //判断有没有初始记录 if (visibleTop > centerY && visibleTop > box[i].getAttribute('data-initial-top')) { //当监听的位置和初始记录位置同时为真 //当显示窗口到达这里的时候 box[i].setAttribute('style', 'position: fixed;top:0px; left:' + centerX + 'px;') //开始漂移 } else { //否则 box[i].setAttribute('style', '') //清除 } } else { //如果没有添加初始记录 box[i].setAttribute('data-initial-top', centerY) //开始添加 } } } ) </script> |