通过js实现页面布局

1 )请实现上图所示的布局
2 )有以下已知条件:
center 区域高度必然大于 left right 区域
left right 区域溢出后与 center 区域共用同一滚动条
left right 区域内容溢出后,请实现以下功能:
left right 区域跟随滚动条滚动到底部就固定住, center 区域继续滚动
滚动条向上滚动,当 center 区域滚动到和 left right 相同高度时, left right 跟随滚
动,滚动到顶部时, left right 同时到达顶部
实现代码:
<!DOCTYPE html>
<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>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      h3 {
        text-align: center;
      }
      .header {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        background-color: burlywood;
        z-index: 10;
      }
      .main {
        margin: 50px 100px 0;
        clear: both;
        box-sizing: border-box;
        position: relative;
      }
      .left {
        background-color: cornflowerblue;
        border: 1px rgb(24, 51, 102) solid;
        float: left;
      }
      .right {
        background-color: darkseagreen;
        border: 1px rgb(70, 95, 70) solid;
        float: right;
      }
      .left, .right {
        width: 300px;
      }
      .bottom {
        position: fixed;
        bottom: 0;
      }
      .bottom.left {
        left: 100px;
      }
      .bottom.right {
        right: 100px;
      }
      .top {
        position: fixed;
        top: 50;
      }
      .top.left {
        left: 100px;
      }
      .top.right {
        right: 100px;
      }
      .center {
        background-color: cadetblue;
        border: 1px rgb(26, 76, 78) solid;
        margin: 0 310px;
      }
      pre {
        line-height: 20px;
      }
      .clearfix {
        overflow: auto;
      }
      .clearfix::after {
        clear: both;
      }

    </style>
  </head>

  <body>
    <header class="header">
      <h3>header</h3>
    </header>
    <main class="main clearfix">
      <aside id="left" class="left">
        <h3>left</h3>
        <pre>
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          </pre>
      </aside>

      <aside id="right" class="right">
        <h3>right</h3>
        <pre>
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29

          30
          31
          32
          33
          34
          35
          36
          37
          38
          39

          40
          41
          42
          43
          44
          45
          46
          47
          48
          49

          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          </pre>
      </aside>
      <section class="center">
        <h3>center</h3>
        <pre>
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29

          30
          31
          32
          33
          34
          35
          36
          37
          38
          39

          40
          41
          42
          43
          44
          45
          46
          47
          48
          49

          50
          51
          52
          53
          54
          55
          56
          57
          58
          59

          60
          61
          62
          63
          64
          65
          66
          67
          68
          69

          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29

          30
          31
          32
          33
          34
          35
          36
          37
          38
          39

          40
          41
          42
          43
          44
          45
          46
          47
          48
          49

          50
          51
          52
          53
          54
          55
          56
          57
          58
          59

          60
          61
          62
          63
          64
          65
          66
          67
          68
          69

          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
        </pre>
      </section>
    </main>
    <script>
      window.onload = () => {
        // 左边显示Dom
        const $left = $('left');
        // 右边显示DOM
        const $right = $('right');
        // 可视区域的高度
        const clientHeight = document.documentElement.clientHeight;
        const $leftHeight = $left.offsetHeight - clientHeight;
        const $rightHeight = $right.offsetHeight - clientHeight;
        console.log('clientHeight', clientHeight);
        console.log('$leftHeight', $leftHeight);
        console.log('$rightHeight', $rightHeight);
        if($rightHeight<=0) {
          $right.classList.add('top');
        }
        if($leftHeight<=0) {
          $left.classList.add('top');
        }
        window.addEventListener('scroll', event => {
          const scrollTop = document.documentElement.scrollTop;
          if ($leftHeight > 0) {
            if (scrollTop > $leftHeight) {
              $left.classList.add('bottom');
            } else {
              $left.classList.remove('bottom');
            }
          }
          if ($rightHeight > 0) {
            if (scrollTop > $rightHeight) {
              $right.classList.add('bottom');
            } else {
              $right.classList.remove('bottom');
            }
          }

        })

        function $(id) {
          return document.getElementById(id);
        }
      }

    </script>
  </body>

</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_陌默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值