121 lines
3.2 KiB
HTML
121 lines
3.2 KiB
HTML
<!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>
|
|
<link rel="stylesheet" href="http:///at.alicdn.com/t/font_3445167_ub2ivnoluaa.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 1000px;
|
|
}
|
|
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: 100px;
|
|
background: pink;
|
|
position: fixed;
|
|
z-index: 999;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: red;
|
|
box-sizing: border-box;
|
|
transition: all ease 0.5s;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 50px;
|
|
position: absolute;
|
|
top: -50px;
|
|
/* z-index: 3; */
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header"></div>
|
|
<div class="content">
|
|
<i class="iconfont icon-shuaxin"></i>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
// 1.绑定滚动事件
|
|
// 2.判断顶部滚动距离是否为0 然后绑定一个下拉事件
|
|
// 3.拉到一定距离固定几秒 然后消失
|
|
// 4.按住不动可以上下滑动（下滑、上滑）
|
|
|
|
var header = $(".header");
|
|
var content = $("content");
|
|
var startY = 0;
|
|
|
|
$("body").onscroll = function () {
|
|
if (document.documentElement.scrollTop == 0) {
|
|
//绑定下拉事件
|
|
a()
|
|
console.log("到顶了:",);
|
|
} else {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function a() {
|
|
|
|
$(".content").addEventListener('touchstart', function (e) {
|
|
startY = e.targetTouches[0].screenY;
|
|
console.log("startY:", startY);
|
|
console.log("touchstart:", e);
|
|
})
|
|
|
|
$(".content").addEventListener('touchmove', function move(e) {
|
|
var moveY = e.targetTouches[0].screenY;
|
|
// console.log("moveY:", moveY);
|
|
// 下滑
|
|
if (startY < moveY) {
|
|
var y = moveY - startY
|
|
$(".content").style.transform = `translateY(${y < 300 ? 300 : 300}px)`
|
|
$(".content").style.overflow = `visible`
|
|
console.log("下滑：", moveY - startY);
|
|
} else {
|
|
// var newy = moveY - startY
|
|
$(".content").style.transform = `translateY(${y < 0 ? 0 : 0}px)`
|
|
// console.log("上滑:", moveY - startY);
|
|
}
|
|
})
|
|
|
|
$(".content").addEventListener('touchend', function (e) {
|
|
console.log("touchend:", e);
|
|
var endY = e.changedTouches[0].screenY;
|
|
var yy = endY - startY
|
|
$(".content").style.transform = `translateY(${yy < 150 ? 150 : 150}px)`
|
|
setTimeout(function () {
|
|
$(".content").style.transform = `translateY(${yy <= 0 ? 0 : 0}px)`
|
|
}, 700)
|
|
})
|
|
|
|
}
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
</script>
|
|
|
|
</html> |