最近 查看朋友圈 发的文章时，发现带弹出广告的网页 也提示 有 mp.weixin.qq.com 提供，猜测可能是使用了CSS的 position:fixed实现。闲来无事，自己闭门又造了个轮子。 苹果手机中的效果如下：
代码纯 html+css 实现，比较简单，直接上代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta charset="utf-8">
<style>
body {
background: #0099EC;
}
.wechat_from {
position: fixed;
background: #303133;
top: 0;
left: 0;
right: 0;
/*防止 下拉太长 显示 蓝色背景*/
height: 300px;
color: #7A7B7D;
padding: 10px 0;
font-size: 12px;
}
.body {
background: #0099EC;
color: #FFF;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 20px 15px;
/*防止 上拉 显示 wechat_bg*/
min-height: 800px;
}
</style>
</head>
<body>
<div class="wechat_from">
<center>此网页由 shuodahua.com 提供</center>
</div>
<div class="body" id="body">
<h1>下拉试试</h1>
<p>您访问的是 miaoqiyuan.cn </p>
<p>下拉显示 由 shuodahua.com 提供 </p>
</div>
<script>
/*
* 在微信内部打开，并且是 安卓 系统，则通过 监听 touch 事件
* 为啥苹果不用？咱写的这个不如微信原生的体验好
*/
if (/micromessenger/gi.test(navigator.userAgent) && /android/gi.test(navigator.userAgent)) {
var $body = document.getElementById('body');
$body.addEventListener('touchstart', function(event) {
event.preventDefault();
event.target.dataY = event.touches[0].pageY;
});
$body.addEventListener('touchmove', function(event) {
event.preventDefault();
var offsetY = (event.touches[0].pageY - event.target.dataY) / 2;
console.log(event.touches[0].pageY - event.target.dataY);
if (offsetY < 300) {
event.target.style.top = offsetY + 'px';
}
});
$body.addEventListener('touchend', function(event) {
event.preventDefault();
event.target.style.top = '0px';
});
}
</script>
</body>
</html>
测试安卓版无效，如果后期解决了，会更新此文。
现在已经支持安卓版本，安卓版本效果如下：
测试地址：http://www.gamenover.com/products/wechat.html
