<!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>
在Safari中继续滑动，固定的元素会抖动，求解？
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
直接写css值这种性能消耗太大了，可以的话尽量用jq的
addClass、removeClass和toggleClass来写；像
scroll这种高频事件，要加函数/事件防抖来写，避免单位时间内高频反复调用带来的性能损失；事件监听写jq的就好了啊，一个
on能省多少字符啊……