alongSelf
alongSelf
  • 发布:2015-11-25 11:27
  • 更新:2017-06-23 19:50
  • 阅读:8431

那么问题来了!导航栏滚动置顶固定

分类:MUI

需求,页面中某一个div滚动到顶部的时候进行固定也就是fixed,
1.有一个上拉加载下拉页面,具体代码如下
父页面代码

mui.init({  
    subpages: [{  
        url: 'shouYe.html',  
        id: 'shouYe.html',  
        styles: {  
            top: '50px',  
            bottom: '0px',  
            hardwareAccelerated: false  
        }  
    }]  
});

子页面代码是一个刷新的容器
2.在刷新的容器里面有一个div代码如下

<body>  
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll" id="scroll-content">  
            <div class="lipin-fixed-conent" >需要滚动置顶的div</div>  
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="jobList">  
            </ul>  
        </div>  
    </div>  
</body>  

当这个div向上滚动到顶部的时候进行固定 反之则不固定
具体效果图附件所示,那个是pc端的,求给各位指点。

2015-11-25 11:27 负责人:无 分享
已邀请:
风雪无血

风雪无血

帮顶!!

stock2

stock2

感觉功能不错.我测试了下在手机里. 可以固顶呀
滚动过了4个内容区域,就开始固顶了.
宽度900 我改为500, 750 我改为350了. 手机像素没这么大.

  • alongSelf (作者)

    感谢您的回复。

    这个例子在手机上面可以是运行的,我要的也是这个效果。但是,我的实际情况是放在了一个上拉加载与下拉刷新的页面里面了,并且是放到了这个刷新的容器里面,所以执行起来就不行了。

    2015-11-25 14:48

alongSelf

alongSelf (作者)

自己顶一下 求关注

alongSelf

alongSelf (作者)

自己顶一下

stock2

stock2

我的刷新页面是 数据是 javascript 方式 重新绑定 .感觉不影响第一次布局(之前怎样,就怎样的)

ws=plus.webview.currentWebview();
ws.setPullToRefresh({support:true,height:"50px",range:"70px",
contentdown:{caption:"下拉可以刷新"},
contentover:{caption:"释放立即刷新"},
contentrefresh:{caption:"正在刷新..."}
},onRefresh);
//自己刷新的 代码

勃纳什

勃纳什

超级赞,很好用

XIAOCHUN

XIAOCHUN

上拉加载的页面导航栏滚动置顶固定问题解决了吗。。也遇到类似问题。。

d***@163.com

d***@163.com

请问,这个问题怎么解决的啊?

猫王elvis

猫王elvis

同问,这个怎么解决呢

cait

cait

请问,这个问题怎么解决的啊?

n***@gmail.com

n***@gmail.com

根据我的理解你就是想在下拉刷新的item中固定某个div是吧,这个可以通过监听滚动事件页面滚动到当前div就设置div固定,页面回滚就去掉此设置。类似以下逻辑:

// fixed 为固定样式,可自定义  
var dom = document.querySelectorAll('.mui-table-view-cell')[3];  
var divTop = dom.offsetTop;  
    window.addEventListener('scroll', function(e) {  
        if(document.body.scrollTop >= pageY) {  
            dom.classList.add('fixed');  
        }else{  
            if(dom.classList.contains('fixed')){  
                dom.classList.remove('fixed');                                    
            }  
        }  
});
  • 1***@qq.com

    mui的scroll组件会让fixed布局失效的,亲

    2017-11-28 11:35

该问题目前已经被锁定, 无法添加新回复