源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2490|回复: 0

[CSS/Html] postion:sticky页面实现一侧固定一侧滚动的效果,到底部后一起滚动

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2023-4-2 19:46:29 | 显示全部楼层 |阅读模式

position的定位类型解释

static:默认值,没有定位,遵循正常的文档流
fixed:固定定位,元素的位置是相对于浏览器窗口
relative:相对定位,相对于其正常的位置,移动元素,其原本所占空间不会改变
absolute:绝对定位,相对于自己最近已定位的父级元素,如果没有已定位的父级元素,则相对于html(一般子绝父相结合使用)
sticky:粘性定位,基于用户的滚动位置来定位,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

所实现的效果,在头部的时候两块内容相同高度

在中间的时候,高度更高的进行滑动,相对矮的不动(如果两侧的内容均超出屏幕高度,则两者同时动,直到相对矮(此例中默认左侧为相对矮的一侧)的到底部为止)

在底部的时候两者相同高度,在底部一起滑动

  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>一侧固定一侧滚动</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }

  13.         .box {
  14.             width: 80%;
  15.             margin: 0 auto;
  16.         }

  17.         .clearfix::after {
  18.             content: "";
  19.             display: block;
  20.             overflow: hidden;
  21.             clear: both;
  22.         }

  23.         .conetnt {
  24.             padding: 2%;
  25.             border: 1px solid #eee;
  26.             margin-bottom: 200px;
  27.             box-sizing: border-box;
  28.         }

  29.         .left {
  30.             height: 3000px;
  31.             width: 60%;
  32.             margin: 0 2%;
  33.             float: left;
  34.             background-color: pink;
  35.         }

  36.         .right {
  37.             height: 800px;
  38.             width: 35%;
  39.             float: right;
  40.             background-color: purple;
  41.             /*对右边的内容使用粘性定位*/
  42.             position: sticky;
  43.             /* top: -200px; */
  44.         }

  45.         .footer {
  46.             width: 100%;
  47.             height: 500px;
  48.             background-color: #000;

  49.         }
  50.     </style>
  51. </head>

  52. <body>
  53.     <div class="box">
  54.         <div class="conetnt clearfix">
  55.             <div class="left">wwwwwww</div>
  56.             <div class="right">
  57.                 q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  
  58.             </div>
  59.         </div>

  60.         <div class="footer">

  61.         </div>
  62.     </div>

  63. </body>

  64. </html>
  65. <script>
  66.     //获得页面卷曲的内容
  67.     //获得浏览器的内部高度
  68.     let ScreenTop = window.innerHeight;
  69.     //获取滚动元素的高度
  70.     let divTop = document.querySelector(".right").offsetHeight;
  71.     let tops = divTop - ScreenTop;
  72.     console.log("tops", tops);
  73.     if (tops <= 0) {
  74.         document.querySelector(".right").style.top = 0 + "px"

  75.     } else {
  76.         document.querySelector(".right").style.top = -tops + "px"
  77.     }


  78. </script>
复制代码


自己粘贴到本地双击在浏览器中打开就可以了!

好了,关于postion:sticky页面实现一侧固定一侧滚动的效果,到底部后一起滚动就说到这了,更多资源素材欢迎大家搜索锦尚中国源码论坛获取!

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-25 21:24 , Processed in 0.034523 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明