css - 移动端布局，Safari中absolute定位抖动？
问题描述
<!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中继续滑动，固定的元素会抖动，求解？
问题解答
回答1：直接写css值这种性能消耗太大了，可以的话尽量用jq的addClass、removeClass和toggleClass来写；
像scroll这种高频事件，要加函数/事件防抖来写，避免单位时间内高频反复调用带来的性能损失；
事件监听写jq的就好了啊，一个on能省多少字符啊……
网公网安备