jquery~吸顶导航效果（移动端）

css:

	*{margin:0;padding:0;}
	body{
		margin:0 auto;
	    max-width:10rem;
	}
	header{
		width:10rem;
		height:1rem;
		background:red;
		position:fixed;
		top:0;
		left:auto;
	}
	section{
		height:100%;
		overflow: auto;
		padding:1rem 0;
	}
	.bananers{
		width:100%;
		height:3rem;
		text-align: center;
		line-height:3rem;
		background: aqua;
	}
	.mains{
		width:100%;
		height:1rem;
		background:red;
		display: flex;
	}
	.mains>div{
		width:100%;
		height:100%;
		border:1px solid #dddddd;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.contents{
		width:100%;
	}
	.contents>div{
		height:50px;
		line-height:50px;
		padding-left:10%;
		border-bottom:1px solid red;
	}
	footer{
		width:10rem;
		height:1rem;
		background: #0086B3;
		position:fixed;
		left:auto;
		bottom:0;
	}
    .fixed-top {
        position: fixed;
        width: 100%;
        top:1rem;
        left:auto;
    }
    .sticky {
        position: -webkit-sticky;/*滚过初始位置时自动吸顶*/
        position: sticky;/*吸顶时的定位*/
        top:1rem;
        left:auto;
        z-index: 999;/*z-index比下方所有层级要高*/
    }

html：

		<header>头部header>
		<section>
			<div class="bananers">内容div>
			<div class="mains">
				<div>导航1div>
				<div>导航2div>
				<div>导航3div>
			div>
			<div class="contents">div>
		section>
		<footer>页脚footer>

js：

	for(var i=0;i<20;i++){
		$(".contents").append(`
${i+1}
`)
	}
	var headers=$("header")[0].getBoundingClientRect().height;
	var mains=$(".mains").offset().top;
	var heights=mains-headers;
	$(".bananers").html(mains+"----"+headers);
	var tops = document.querySelector('.mains');
	function fixed(num) {
        var nys= navigator.userAgent;
        var isAndroid = nys.indexOf('Android') > -1 || nys.indexOf('Adr') > -1; 
        var isIOS = !!nys.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
        if(isAndroid) {
            document.body.onscroll = function(e) {
                var scrollT = document.body.scrollTop;
                if (scrollT > num) {
                    $(tops).addClass('fixed-top');
                }else {
                    $(tops).removeClass('fixed-top');
                }
            };
        }else if(isIOS) {
            $(tops).addClass('sticky');
        }
    }
    fixed(heights);