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

Karon_
  • 1.1k

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

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

大家碰过这个问题吗?

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; 流畅到不能再流畅

缺点:属性太新,部分手机不支持

回复
阅读 6.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的过度动画

transition: all 1s ease-in-out;

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

贴一下脚本出来~

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

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

onscroll事件在移动端会有延迟,你可以百度搜索一下scroll事件延迟,似乎没有特别理想的解决方案

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏