移动端布局，Safari中absolute定位抖动

我有时不是我 2017-02-23 05:44:06



<!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>

<div class="page-container">

    <div class="page-header"></div>

    <div class="page-wrapper">

        <div style="height: 400px;"></div>

        <div class="submenu-container">

            <div class="submenu"></div>

        </div>

        <div style="height: 1000px;"></div>

    </div>

    <div class="page-footer"></div>

</div>

<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>