（ 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>
扫一扫
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
