<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
<title></title>
<style>
*{margin: 0px;padding: 0px;}
html{overflow: auto;position: relative;}
.div1{ 100%;height: 3rem;background: #8A2BE2;}
.div2{ 100%;height: 3rem;background: #D2691E;}
.div3{ 100%;height: 4rem;background: #E5EECC;text-align: center;line-height: 4rem;}
.div4{ 100%;height: 9rem;background: #FF0000;}
.div5{ 100%;height: 9rem;background: #FFA500;}
</style>
</head>
<body>
<script>
var iWidth=document.documentElement.getBoundingClientRect().width;
iWidth=iWidth>540?540:iWidth;
document.getElementsByTagName("html")[0].style.fontSize=iWidth/10+"px";
</script>
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3" id="fixed">固定</div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
window.onload=function(){
var fixedTop = document.getElementById('fixed').offsetTop;
document.ontouchmove = function() {
move();
}
window.onscroll=function(){
move();
}
function move(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t >= fixedTop) {
document.getElementById('fixed').style.position = "fixed";
document.getElementById('fixed').style.top=0;
} else {
document.getElementById('fixed').style.position = "static";
};
console.log(document.getElementById('fixed').offsetTop)
}
}
</script>
</html>