屏幕移动时,下拉到一定程度后筛选框固定头部

2016-12-22 mubrand mui

页面经常用到的效果,屏幕下拉移动时,移动到一定距离筛选框固定到头部位置,向上移动时,返回到之前位置。

比较粗暴的实现方法:

代码:

<!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>

标签: mui

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1