固定侧边栏
固定侧边栏 – 实现当滚动条下滑到某个位置时 侧边栏绝对固定 并显示相应文字
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><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;}.banner{height: 250px;background-color: skyblue;}.header{height: 150px;background-color: purple;}.main{height: 1000px;background-color: yellow;}span{display: none;position: absolute;bottom: 0;}style>
head>
<body><div class="slider-bar"><span class="goback">返回顶部span>div><div class="header w">头部区域div><div class="banner w">banner区域div><div class="main w">主体区域div><script>//1.获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');var bannerTop = banner.offsetTop;//当我们侧边栏固定定位之后应该变化的数值var sliderbarTop = sliderbar.offsetTop - bannerTop;//获取主体元素var main = document.querySelector('.main');var goback = document.querySelector('.goback')var mainTop = main.offsetTop;//页面滚动事件document.addEventListener('scroll',function(){//window.pageYoffset 页面被卷去的头部//当我们页面被卷去头部大于等于某个值时 此时侧面栏就要改成固定定位if(window.pageYOffset>=bannerTop){sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';}else{sliderbar.style.position = 'absolute';}//当我们页面滚动到main盒子，就显示goback模块if(window.pageYOffset>=mainTop){goback.style.display = 'block';}else{goback.style.display = 'none';}})script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！