z***@126.com
z***@126.com
  • 发布:2016-11-21 15:11
  • 更新:2016-12-22 17:08
  • 阅读:1223

咨询一下效果,应该如何实现

分类:MUI
css

这是默认的效果图,中间一块我用的是子页面,子页面有一个条件筛选栏,我向上滑动时,当筛选栏到达顶部时,就固定在哪里,当向下滑动到一定位置时,筛选栏就开始随着一起向下滑动,应该如何实现?

2016-11-21 15:11 负责人:无 分享
已邀请:
爆栈工程师

爆栈工程师 - 爆栈工程师

同问

fangyou

fangyou

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  

            function showHeader() {  
                if($("body").scrollTop() >= 80) {  
                    $("#header").removeAttr("hidden");  
                } else {  
                    $("#header").attr("hidden", "hidden");  
                }  
            }  
            setInterval("showHeader()", 100);  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">fangyou</h1>  
        </header>  
        <header id="header" class="mui-bar mui-bar-nav" hidden="hidden">  
            <h1 class="mui-title">fangyou  
                <br><div>选项卡</div>  
            </h1>  
        </header>  
        <div style="margin-top: 45px;">  
            <div style="height: 80px;">图片</div>  
            <div id="option">选项卡</div>  
            <p>2</p>  
            <p>3</p>  
            <p>4</p>  
            <p>5</p>  
            <p>6</p>  
            <p>7</p>  
            <p>8</p>  
            <p>9</p>  
            <p>10</p>  
            <p>8</p>  
            <p>9</p>  
            <p>10</p>  
            <p>8</p>  
            <p>9</p>  
            <p>10</p>  
            <p>8</p>  
            <p>9</p>  
            <p>10</p>  
        </div>  
    </body>  

</html>

真机没试,浏览器没问题

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