先上效果圖，正常展示：
向上滑動搜索框部分：
向下滑動搜索框部分：
實現代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑動效果</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 1.8rem;
line-height: 5rem;
}
body {
background: #557669;
}
.content {
width: 100%;
height: 30%;
overflow: auto;
background: white;
position: absolute;
bottom: 0;
}
.searchInput {
position: fixed;
width: 100%;
height: 4rem;
margin-top: -4rem;
line-height: 4rem;
text-align: center;
background: white;
border-bottom: 1px solid #666;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
li {
height: 5rem;
border-bottom: 1px solid #666;
}
</style>
<body>
<div class="content">
<div class="searchInput">搜索框</div>
<ul>
<li>測試數據1</li>
<li>測試數據2</li>
<li>測試數據3</li>
<li>測試數據4</li>
<li>測試數據5</li>
<li>測試數據6</li>
<li>測試數據7</li>
<li>測試數據8</li>
<li>測試數據9</li>
<li>測試數據10</li>
<li>測試數據11</li>
<li>測試數據12</li>
</ul>
</div>
</body>
<script type="text/javascript">
/*判斷上下滑動：*/
$('.searchInput').bind('touchstart', function (e) {
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".searchInput").bind("touchend", function (e) {
//獲取滑動結束時屏幕的X,Y
// e.originalEvent = event
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
//獲取滑動距離
distanceX = endX - startX;
distanceY = endY - startY;
//判斷滑動方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
console.log('往右滑動');
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
console.log('往左滑動');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
console.log('向上滑動');
// $(".content ").animate({ height: "70%" })
var contentStyle = $(".content ").attr("style");
if (!contentStyle || contentStyle == "height: 30%;") {
$(".content ").animate({ height: "70%" })
} else if (contentStyle == "height: 0%;") {
$(".content ").animate({ height: "30%" })
}
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
console.log('向下滑動');
// $(".content ").animate({ height: "30%" })
var contentStyle = $(".content ").attr("style");
if (!contentStyle || contentStyle == "height: 30%;") {
$(".content ").animate({ height: "0%" })
} else if (contentStyle == "height: 70%;") {
$(".content ").animate({ height: "30%" })
}
}
});
</script>
</html>拷貝至本地可直接運行查看效果。
待優化：
數據滾動到頂部自動觸發搜索框下滑效果，數據上滑查看的時候自動觸發搜索框上滑的效果。
（判斷滾動條事件即可，此部分簡單就不做下去了，有興趣的自行嘗試）