找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发手机端固定上下导航教程

2018-07-13 分类：教程 阅读(855) 评论(0)

web前端项目开发视频教程|前端开发移动端问题|初识前端与移动开发到项目开发

做过移动端项目的小伙伴应该经常遇到页面中需要固定上下导航的需求，然后很多朋友喜欢用｛position:fixed｝这个属性来做。
代码如下：
html 代码片段

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>移动端导航前端开发</title>
</head>
<style type=”text/css”>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .wrapper {
        margin: 0 auto;
        background: #ccc;
    }
    .clear {
        clear: both;
        width: 100%;
        height: 0;
    }
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: “”;
        height: 0;
        clear: both;
    }
    .center {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 60px 0;
    }
    .center p {
        height: 100px;
        line-height: 100px;
        font-size: 30px;
    }
    .header {
        height: 60px;
        background: red;
        position: fixed;
        top: 0;
        width: 100%;
    }
    .header ul li {
        width: 25%;
        text-align: center;
        line-height: 60px;
        float: left;
        font-size: 20px;
    }
    .footer {
        height: 60px;
        background: blue;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    .footer ul li {
        width: 25%;
        text-align: center;
        line-height: 60px;
        float: left;
        font-size: 20px;
        color: #fff;
    }
</style>
<body>
    <div class=”wrapper”>
        <div class=”header”>
            <ul class=”clearfix”>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
            </ul>
        </div>
        <div class=”center”>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
        </div>
        <div class=”footer”>
            <ul class=”clearfix”>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
            </ul>
        </div>
    </div>
</body>
</html>

仔细看过手机app界面的朋友应该会发现，这样做是有缺陷的，不管是微信还是qq，右侧的滚动条都是没有滑到导航上来的，不行可以拿出手机看看，所以为了更好的页面效果，这里用到js来实现
html 代码片段

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>移动前端开发原则</title>
</head>
<style type=”text/css”>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .wrapper {
        margin: 0 auto;
        background: #ccc;
    }
    .clear {
        clear: both;
        width: 100%;
        height: 0;
    }
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: “”;
        height: 0;
        clear: both;
    }
    .center {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .center p {
        font-size: 30px;
        line-height: 100px;
        height: 100px;
    }
    .header {
        height: 60px;
        background: red;
    }
    .header ul li {
        width: 25%;
        text-align: center;
        line-height: 60px;
        float: left;
        font-size: 20px;
    }
    .footer {
        height: 60px;
        background: blue;
    }
    .footer ul li {
        width: 25%;
        text-align: center;
        line-height: 60px;
        float: left;
        font-size: 20px;
        color: #fff;
    }
</style>
<body>
    <div class=”wrapper”>
        <div class=”header”>
            <ul class=”clearfix”>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
            </ul>
        </div>
        <div class=”center” style=”height:1000px;”>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
            <p>此处是内容区域</p>
        </div>
        <div class=”footer”>
            <ul class=”clearfix”>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
            </ul>
        </div>
    </div>
    <script type=”text/javascript” src=’http://s.thsi.cn/js/jquery-1.7.2.min.js’></script>
    <script type=”text/javascript”>
        $(function () {
            autoSizeHeight();
            window.onresize = function () { //拖动浏览器窗口导航也适应
                autoSizeHeight();
            }
        })
        //固定导航
        function autoSizeHeight() {
            var footerH = 0;
            var winH = $(window).height();
            footerH = $(“.footer”).outerHeight(true);
            //滚动区域
            if ($(“.center”).length != 0) {
                var headerH = $(“.center”).position().top;
                $(“.center”).height(winH – footerH – headerH);
            }
        }
    </script>
</body>
</html>
前端移动端开发单位|移动端前端开发库|前端开发移动端兼容性问题
赞(0)
前端开发者 » 前端开发手机端固定上下导航教程
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论