手机端，网页滚动时菜单栏置顶问题

在做手机网页时，有个需求要求当屏幕滚动到某个位置时，菜单栏脱离网页停留在屏幕顶部，效果做是做出来了，在电脑浏览器上测试滑动很流畅，但在手机端测试，会有明显的问题。

问题是这样的：手机端滑动网页，要等滚动结束后，菜单栏才会出现并停留在顶部，很明显的跳闪，好像突然就跳到顶部了，无法很流畅的，但我想要的效果是，网页滚动到那个位置，顶部就停留在在屏幕顶部，就算是网页还在滚动中。

大家碰过这个问题吗？

var scrolltop = 0;
$(document).on('scroll', function(e) {
    scrolltop = $(this).scrollTop();
    if( scrolltop >= topheight) {
        setfixed($navbd);
    } else {
        setabsolute($navbd);
    } 
})

function setfixed( obj ) {
    obj.addClass('nav-bd-fixed');
}

function setabsolute( obj ) {
    obj.removeClass('nav-bd-fixed');
}

.nav-bd-fixed {
    position: fixed;
}

---

贴一下脚本出来~

---

没有代码，我猜是计算判断的问题~请仔细想下自己的逻辑

---

建议 监听网页滚动到那个位置以后先把菜单栏display:none 一下 然后在从顶部slidein 出来 这样起码没有闪屏的问题

---

一楼的想法还不错。我试验了一下，效果还可以。

js代码如下，我的nav懒得写固定高度是100。

window.onscroll = function() {
    var nav = document.getElementById('nav-bar');
    
    //首先nav没有滚出可视区域，就设置他的正常状态。
    if(document.body.scrollTop <=100) {
        nav.style.opacity = 1;
        nav.style.position = 'relative';
        nav.classList.remove('tran');
    }
    
     //nav滚出可视区域但是没有达到固定区域，就先设置好它的位置。然后隐藏他。(不用display： none因为过度效果并不理想。)
    if(document.body.scrollTop >100 && document.body.scrollTop < 400) {
        nav.style.opacity = 0;
        nav.style.position = 'fixed';
    }
    //到了固定区域就显示出来并加上过度效果。
    if(document.body.scrollTop >= 400) {
        nav.style.opacity = 1;
        nav.classList.add('tran');
    }
}

tran这个 class 就是一段css3的过度动画

transition: all 1s ease-in-out;

---

跳是因为你的固定顶端是脚本实现的；PC上的浏览器JS轮询50毫秒以下；看不出来跳；手机浏览器JS轮询因为省电及其他原因，降到1S甚至更高；还有个原因就是如果安卓机4.0.1以下系统，顶端的确定是滚动停止后轮询的；所以才会，惯性滚动停止后，固顶才会跳到现屏幕顶端；

推荐使用CSS的position：fixed;top:0;width:100%;实现；