慕课网实战项目《WebAPP书城整站开发》笔记三：触屏唤出上下边栏交互开发和优化

最新推荐文章于 2019-09-11 23:35:35 发布

「已注销」

最新推荐文章于 2019-09-11 23:35:35 发布

阅读量1.6k

点赞数 1

分类专栏： Web开发文章标签： web app click scroll

本文链接：https://blog.csdn.net/Lovejulyer/article/details/72593724

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

推荐IMOOC实战课程：《WebApp书城整站开发》

html

    <!-- 仿native上边栏 -->
    <div class="top-nav" id="top-nav" style="display:none">
    </div>

    <!-- 内容touch操作区域 -->
    <div class="m-artical-action">
        <div class="artical-action-mid" id="action_mid"></div>
    </div>

    <!-- 仿native下边栏 -->
    <div class="bottom-nav" id="bottom-nav" style="display:none">
    </div>

css

    /*内容touch操作区域样式*/
    .artical-action-top { 
        position: fixed;  
        top: 0px;  
        height: 30%;  
        width: 100%;  
        z-index: 90; }
    .artical-action-mid {  
        position: fixed;  
        top: 30%;  
        height: 40%;  
        width: 100%;  
        z-index: 10002; }
    .artical-action-bottom {  
        position: fixed;  
        bottom: 0px;  
        height: 30%;  
        width: 100%;  
        z-index: 90; }

javascript

    var Win = $(window);
    var Doc = $(document);

    // Dom 结构
    var Dom = {
        top_nav : $('#top-nav'),
        bottom_nav : $('.bottom-nav')
    };

    function EventHandler() {
        // todo 交互的事件绑定
        // 屏幕touch事件
        $('#action_mid').click(function () {
            if (Dom.top_nav.css('display') === 'none') {
                Dom.bottom_nav.show();
                Dom.top_nav.show();
            } else {
                Dom.bottom_nav.hide();
                Dom.top_nav.hide();
            }
        });
        // 屏幕scroll事件
        Win.scoll(function(){
            Dom.bottom_nav.hide();
            Dom.top_nav.hide();
        });
    }