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能省多少字符啊……
網公網安備