alongSelf

发布：2015-11-25 11:27
更新：2017-06-23 19:50
阅读：8238

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

分类：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端的，求给各位指点。

ScrollFix.zip

2015-11-25 11:27 负责人:无分享

11 个回复

风雪无血

帮顶！！

stock2

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

alongSelf (作者)

感谢您的回复。

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

2015-11-25 14:48

alongSelf (作者)

自己顶一下求关注

alongSelf (作者)

自己顶一下

stock2

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

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

勃纳什

超级赞，很好用

XIAOCHUN

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

请问，这个问题怎么解决的啊？

同问，这个怎么解决呢

请问，这个问题怎么解决的啊？

根据我的理解你就是想在下拉刷新的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

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

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

11 个回复

公告

相关问题

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

与内容相关的链接

11 个回复

公告

相关问题