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

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

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

大家碰过这个问题吗？

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

2016.12.13记：

问题解决：使用 position: sticky; 流畅到不能再流畅

缺点：属性太新，部分手机不支持

javascript

阅读 8.6k

6 个回答

李若炎

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

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的过度动画