1：//实现需求，导航条在屏幕滑动的时候，页面头部固定在屏幕顶部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>音乐tail</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ /*height: 100%; overflow: hidden;*/ /*禁止系统滚动条*/ } .head{ height: 100px; width: 100%; background-color: palegreen; } </style> </head> <body> <div id="warp"> <div class="head"></div> </div> </body> <script type="text/javascript"> window.onload = function(){ document.addEventListener("touchstart",function(ev){ ev = ev || event; ev.preventDefault(); }) ;(function(){ //rem适配 var styleNode = document.createElement("style"); var w = document.documentElement.clientWidth/16; styleNode.innerHTML = "html{font-size:"+w+"px !important}" document.head.appendChild(styleNode); })() ;(function(){ var wrap = document.getElementById("warp") for(var i=0;i<200;i++){ wrap.innerHTML+="zdy<br/>"; } })() } </script> </html>
2：实现效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>音乐tail</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
/*禁止系统滚动条*/
}
#warp{
height: 100%;
overflow: auto;
}
.head{
position: absolute;
height: 100px;
100%;
background-color: palegreen;
}
</style>
</head>
<body>
<div id="warp">
<div class="head"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
document.addEventListener("touchstart",function(ev){
ev = ev || event;
ev.preventDefault();
})
;(function(){
//rem适配
var styleNode = document.createElement("style");
var w = document.documentElement.clientWidth/16;
styleNode.innerHTML = "html{font-size:"+w+"px !important}"
document.head.appendChild(styleNode);
})()
;(function(){
var wrap = document.getElementById("warp")
for(var i=0;i<200;i++){
wrap.innerHTML+="zdy<br/>";
}
})()
}
</script>
</html>
//元素移动的原因：开启了系统滚动条，元素定位参照Body定位，在Body滑动的时候，元素也会被覆盖，解决方法，禁止系统滚动条，在外部容器开始系统滚动条