<!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 フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 値を直接書き込むのはコストがかかりすぎます。可能であれば、jq の
addClass、removeClass、およびtoggleClassを使用してください。書く;scrollのような高頻度のイベントは、単位時間あたりの高頻度の繰り返し呼び出しによって引き起こされるパフォーマンスの損失を避けるために、関数/イベントのアンチシェイクを使用して記述する必要があります。イベント監視用の jq を記述するだけです。1 つの
onで何文字保存できるか...