<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>layout</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body, .page-container {
height: 100%;
}
.page-container {
position: relative;
overflow: hidden;
}
.page-header {
position: absolute;
top: 0;
width: 100%;
height: 40px;
border-bottom: 1px solid red;
}
.page-wrapper {
margin-top: 40px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.page-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
border-top: 1px solid black;
}
.submenu {
background: #000;
width: 100%;
height: 20px;
z-index: 5555;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
</style>
</head>
<body>
<p class="page-container">
<p class="page-header"></p>
<p class="page-wrapper">
<p style="height: 400px;"></p>
<p class="submenu-container">
<p class="submenu"></p>
</p>
<p style="height: 1000px;"></p>
</p>
<p class="page-footer"></p>
</p>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function () {
var $el = $('.page-wrapper');
$el.height($(window).height() - 80);
$el[0].addEventListener('touchmove', fixedIt, false);
$el[0].addEventListener('scroll', fixedIt, false);
});
function fixedIt() {
var offsetTop = $('.submenu-container').offset().top;
if (offsetTop <= 40) {
$('.submenu').css({position: 'absolute', top: '40px'});
} else {
$('.submenu').css({position: 'static'});
}
}
</script>
</body>
</html>
高洛峰2017-04-17 14:54:11
Directly writing css values consumes too much performance. If possible, try to use jq's addClass, removeClass and toggleClass to write;
High-frequency events like scroll need to be written with function/event anti-shaking to avoid performance losses caused by high-frequency repeated calls per unit time;
Just write jq for event monitoring. How many characters can be saved by a on...
