验证中...
设备页面卷曲距离
Raw Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xdomain</title>
<style type="text/css">
.div {
width: 100%;
height: 300px;
background: #000000;
margin: 0 0 300px 0;
position: relative;
}
#clearTheTime {
position: fixed;
top: 0;left: 0;z-index: 9;
}
#aa {
position: fixed;
top: 30px;left: 0;z-index: 9;
}
.invite-f {
width: 80%;
position: absolute;
z-index: 999;
height: 50px;
background: red;
left: 10%;
bottom: 10px;
display: inline-block;
}
</style>
</head>
<body>
<script src="//jpillora.com/xdomain/dist/xdomain.js" slave="//taoqikid-cms.bevaparents.com/proxy.html"></script>
<script type="text/javascript" src="//3w.beva.cn/passport/accountcenter_wap/js/jquery-1.9.1.min.js"></script>
<button type="button" id="clearTheTime">json</button>
<div id="aa">
</div>
<div class="div">
<span class="invite-f">123132132</span>
</div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<script>
// 当前手机 可控屏幕高度
let thePhoneWorkHeight = window.screen.availHeight
// 监控 当前页面 滑动卷曲时间
$(window).scroll(function(event) {
// 当前页面卷曲 出屏幕 距离
var oTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
/* 如果当前页面 卷曲出距离 超过本设备高度一半 则更改 “邀请好友” 按钮放置 状态 */
if(oTop > (thePhoneWorkHeight/2) ){
$(".invite-f").css({"position":"fixed"}).show(1000)
}else {
$(".invite-f").css({"position":"absolute"})
}
});
</script>
</body>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025