前端学习之小案例|前端小案例之仿淘宝固定侧边栏 css|js|html

简单仿淘宝固定侧边栏案例-通过添加页面滚动事件实现相应效果最近入门学习前端用简单的html结构加CSS样式还有js写了个仿淘宝固定侧边栏案例的小案例在这里分享给大家。
文章目录

- 简单仿淘宝固定侧边栏案例-通过添加页面滚动事件实现相应效果
一、案例介绍？
二、案例代码
总结

【前端学习之小案例|前端小案例之仿淘宝固定侧边栏】
提示：以下是本篇文章正文内容，下面案例可供参考
一、案例介绍？效果如下:

文章图片

该案例有四个盒子，slider-bar、header、main、footer将slider-bar侧边栏盒子先用绝对定位定位到右侧，其他三个盒子依次居中对齐放。可以看到当我们滚动到主体页面的时候我们的侧边栏盒子变成固定定位并维持在那个位置，当我们滚动到尾部区域的时候我们可以看到原本隐藏在侧边栏盒子里面的span便签显示出来了。二、案例代码

Document - 锐客网 > * { margin: 0; padding: 0; color: #fff; }.w { width: 1000px; margin: 0 auto; }.header { height: 300px; background-color: purple; }.main { height: 700px; background-color: green; }.footer { height: 1000px; background-color: skyblue; }.slider-bar { position: absolute; width: 70px; height: 200px; top: 400px; right: 100px; background-color: blue; }.back { /* 先隐藏起来 */ display: none; } class="back">返回顶部头部区域主体部分尾部区域 > var sliderbar = document.querySelector('.slider-bar'); var main = document.querySelector('.main'); var footer = document.querySelector('.footer'); var back = document.querySelector('.back'); // 获取main盒子距离顶部的高度 var mainTop = main.offsetTop; // 获取footer盒子距离顶部的高度 var footerTop = footer.offsetTop; console.log(footerTop); // 用侧边栏原先跟顶部的距离减去mainTop盒子跟顶部的距离得到侧边栏变成固定定位后的距离 var sliderbarTop = sliderbar.offsetTop - mainTop; document.addEventListener('scroll', function () { // window.pageYOffset返回文档当前沿垂直轴（即向上或向下）滚动的像素数 if (window.pageYOffset >= mainTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '400px'; } if (window.pageYOffset >= footerTop) { back.style.display = 'block'; } else { back.style.display = 'none'; } })

总结学习前端将每天学到的小案例分享给大家，写的不好的地方还望大家多多指教。