下滑页面

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>fullScreenMenu</title>
5
<style type="text/css">
6
* {
7
margin: 0;
8
padding: 0;
9
}
10
#woShiCaiDan {
11
position: fixed;
12
top: -100vh;
13
left: 0;
14
width: 100vw;
15
height: 100vh;
16
background-color: skyblue;
17
transition: top .3s;
18
}
19
.open {
20
top: 0!important;
21
}
22
#woShiAnNiu {
23
position: fixed;
24
top: 100px;
25
right: 100px;
26
display: block;
27
border: 1px solid black;
28
border-radius: 3px;
29
width: 60px;
30
height: 30px;
31
line-height: 30px;
32
text-align: center;
33
}
34
</style>
35
</head>
36
<body>
37
<div id="woShiCaiDan"></div>
38
<span id="woShiAnNiu" onclick="qieHuanCaiDan()">MENU</span>
39
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
40
<script type="text/javascript">
41
var qieHuanCaiDan = function() {
42
$("#woShiCaiDan").toggleClass("open");
43
}
44
</script>
45
</body>
46
</html>