关于元素滚动scroll案例

最新推荐文章于 2024-07-26 20:46:33 发布

qq_47764627

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量128

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_47764627/article/details/119876036

版权

注意：如果在盒子内元素被卷去的头部是element.scroll.Top

如果在页面被卷去的头部是 windowpageYoffset

下面是一个仿照淘宝的案例大家可以参考下

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.slider-bar {

position: absolute;

left: 50%;

top: 300px;

margin-left: 600px;

width: 45px;

height: 130px;

background-color: pink;

}

.w {

width: 1200px;

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;

}

</style>

</head>

<body>

</div>

<div class="banner w">banner区域</div>

//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 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位

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';

}

})

</script>

</body>

</html>

qq_47764627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于元素滚动scroll案例

注意：如果在盒子内元素被卷去的头部是element.scroll.Top如果在页面被卷去的头部是 windowpageYoffset下面是一个仿照淘宝的案例大家可以参考下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initia...
复制链接

扫一扫