项目实践（一）导航条固定定位

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;
				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>

　//元素移动的原因：开启了系统滚动条，元素定位参照Body定位，在Body滑动的时候，元素也会被覆盖，解决方法，禁止系统滚动条，在外部容器开始系统滚动条

项目实践（一）导航条固定定位

猜你喜欢