经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js实现淘宝固定侧边栏
来源:jb51  时间:2022/7/4 8:50:47  对本文有异议

本文实例为大家分享了js实现淘宝固定侧边栏的具体代码,供大家参考,具体内容如下

1.实现效果:

当页面运行到banner区域时,右边侧边栏改为固定定位,当页面运行到主体区域时,右边侧边栏显示返回到顶部。

2.思路:

(1)给document加scroll事件。

(2)获取页面被卷去的部分用window.pageYOffset.

(3)不断判断页面滚动了多少。计算右边侧边栏应该待的位置。

3.代码:

pink老师用了固定定位fixed(固定定位是相对于窗口的距离),我做的还是用绝对定位(绝对定位是相对于父元素来说的,即document),都是可以实现的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. ? ? <meta charset="UTF-8">
  5. ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. ? ? <title>Document</title>
  8. ? ? <style>
  9. ? ? ? ? .top {
  10. ? ? ? ? ? ? width: 80%;
  11. ? ? ? ? ? ? height: 200px;
  12. ? ? ? ? ? ? background-color: pink;
  13. ? ? ? ? }
  14. ? ? ? ? .banner {
  15. ? ? ? ? ? ? width: 80%;
  16. ? ? ? ? ? ? height: 400px;
  17. ? ? ? ? ? ? background-color: aquamarine;
  18. ? ? ? ? }
  19. ? ? ? ? .main {
  20. ? ? ? ? ? ? width: 80%;
  21. ? ? ? ? ? ? height: 800px;
  22. ? ? ? ? ? ? background-color: red;
  23. ? ? ? ? }
  24. ? ? ? ? .foot {
  25. ? ? ? ? ? ? width: 80%;
  26. ? ? ? ? ? ? height: 400px;
  27. ? ? ? ? ? ? background-color:blanchedalmond;
  28. ? ? ? ? }
  29. ? ? ? ? .lan {
  30. ? ? ? ? ? ? position: absolute;
  31. ? ? ? ? ? ? right:10%;
  32. ? ? ? ? ? ? top:400px;
  33. ? ? ? ? ? ? width: 80px;
  34. ? ? ? ? ? ? height: 80px;
  35. ? ? ? ? ? ? background-color: cadetblue;
  36. ? ? ? ? }
  37. ? ? </style>
  38. </head>
  39. <body>
  40. ? ? <div class="top">头部区域</div>
  41. ? ? <div class="banner">banner区域</div>
  42. ? ? <div class="main">头部区域</div>
  43. ? ? <div class="foot">尾部区域</div>
  44. ? ? <div class="lan"></div>
  45. ? ? <script>
  46. ? ? ? ? var lan = document.querySelector('.lan');
  47. ? ? ? ? document.addEventListener('scroll', function() {
  48. ? ? ? ? ? ? console.log('jkjkkj');
  49. ? ? ? ? ? ? var top = window.pageYOffset;
  50. ? ? ? ? ? ? if(top ?> 200) {
  51. ? ? ? ? ? ? ? ? // 改为固定定位。
  52. ? ? ? ? ? ? ? ? var topp = 400-200 + top;
  53. ? ? ? ? ? ? ? ? lan.style.top = topp+'px';
  54. ? ? ? ? ? ? ? ? if(top > 600) {
  55. ? ? ? ? ? ? ? ? ? ? lan.innerHTML = '返回顶部';
  56. ? ? ? ? ? ? ? ? } else {
  57. ? ? ? ? ? ? ? ? ? ? lan.innerHTML = '';
  58. ? ? ? ? ? ? ? ? }
  59. ?
  60. ? ? ? ? ? ? } else {
  61. ? ? ? ? ? ? ? ? lan.style.top = 400+'px';
  62. ? ? ? ? ? ? ? ? lan.innerHTML = '';
  63. ? ? ? ? ? ? }
  64. ? ? ? ? })
  65. ? ? </script>
  66. </body>
  67. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号