58 lines
1.3 KiB
HTML
58 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>仿照淘宝滚动固定</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
body {
|
|
height: 3000px;
|
|
background: #8d8d8d;
|
|
}
|
|
.menu {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
height: 60px;
|
|
border-bottom: 1px solid #d5d2d2;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
}
|
|
.fixed {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<ul class="menu">
|
|
<li>左侧</li>
|
|
<li>右侧</li>
|
|
</ul>
|
|
|
|
|
|
<script>
|
|
var body = document.querySelector("body")
|
|
body.onscroll = function (event) {
|
|
console.log(event)
|
|
var Y = document.documentElement.scrollTop;
|
|
if (Y > 300) {
|
|
document.querySelector(".menu").className = "menu fixed"
|
|
} else {
|
|
document.querySelector(".menu").className = "menu"
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |