css - 移動(dòng)端布局，Safari中absolute定位抖動(dòng)？
問(wèn)題描述
<!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中繼續(xù)滑動(dòng)，固定的元素會(huì)抖動(dòng)，求解？
問(wèn)題解答
回答1：直接寫(xiě)css值這種性能消耗太大了，可以的話盡量用jq的addClass、removeClass和toggleClass來(lái)寫(xiě)；
像scroll這種高頻事件，要加函數(shù)/事件防抖來(lái)寫(xiě)，避免單位時(shí)間內(nèi)高頻反復(fù)調(diào)用帶來(lái)的性能損失；
事件監(jiān)聽(tīng)寫(xiě)jq的就好了啊，一個(gè)on能省多少字符啊……
網(wǎng)公網(wǎng)安備