【js scroll案例,当到一定程度时,元素由绝对定位改为固定定位window.pageXOffset】
文章图片
Title - 锐客网
>
body {
height: 5000px;
}.slider-bar {
position: absolute;
right: 0;
width: 100px;
height: 150px;
top: 600px;
border: black solid 1px;
background-color: #e64942;
float: right;
}
.banner {
height: 1000px;
background-color: pink;
}
.a{
height: 500px;
background-color: #6db8ff;
}
>
//1.获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
//banner.offsetTop是初始banner距离头部的距离,同时在本案例中大于滚动大于该距离时固定元素
var bannerTop = banner.offsetTop;
console.log(bannerTop)
//侧边栏固定后的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
//2.页面滚动事件
document.addEventListener('scroll', function () {
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 = '600px';
}
})
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换