2

我目前有一个 div 在以手机分辨率显示时会更改为页面底部的固定位置,并且应该显示作者内容。单击此 div 时,菜单会使用 jquery 向上滑动。此时,div 显示为透明的,但是当点击 div 应该在的位置时,它会像应该的那样滑动打开菜单。

我不确定发生了什么,但我所做的所有调试都没有导致任何结果。有没有其他人经历过这个,或者知道如何解决它?

这是该片段的 HTML/CSS:

<div id="secondaryBox" class="span6 pull-right">
                    <div id="author" class="collapsed">
                        <?php if(!empty($user['avatarPath'])){?>
                            <img src="<?php echo $user['avatarPath'] ?>" class="avatar avatar-50 photo avatar-default" height="50" width="50" />
                        <?php }else{
                            echo get_avatar( $current_user, 50); 
                        } ?>
                        <h5><?php echo $user['displayName']; ?></h5>
                        <h6><span class="hidden-phone"><?php echo get_current_user_role($user['role']) ?>, </span><?php echo $user['schoolName']; ?></h6>
                        <div id="phoneCaret" class="circleCaret visible-phone"><b class="caret"></b></div>
                    </div>
                    <?php if ( current_user_can('read') ) { ?>
                    <div id="hiddenMenu">
                        <div class="addMenu hidden-phone collapsed">
                            <span>Additional Options </span>
                            <div class="circleCaret"><b class="caret"></b></div>
                        </div>
                        <ul id="slideOutMenu">
                            <?php if ( current_user_can('add_users') ) { ?>
                                <li><a href="/wp-admin/admin.php?page=users"><i class="icon-th-list icon-white"></i> Manage Users</a></li>
                                <?php if(is_super_admin($current_user->ID)){?>
                                <li><a href="/wp-admin/admin.php?page=import"><i class="icon-th-list icon-white"></i> Export Users</a></li>
                                <?php }?>
                                <li class="divider"></li>
                            <?php } 
                            if ( current_user_can('manage_categories') ) { ?>
                                <li><a href="<?php $networkURL ?>/wp-admin/network/sites.php"><i class="icon-plus icon-white"></i> Create School</a></li>
                                <li><a href="/wp-admin/edit-tags.php?taxonomy=category"><i class="icon-tags icon-white"></i> Manage Categories</a></li>
                                <li><a href="/wp-admin/admin.php?page=school_settings"><i class="icon-edit icon-white"></i> School Settings</a></li>
                                <li class="divider"></li>
                            <?php }
                            if ( current_user_can('manage_network_options') ) { ?>
                                <li><a href="/wp-admin/network/sites.php"><i class="icon-globe icon-white"></i> Network Sites</a></li>
                                <li><a href="/wp-admin/options-general.php"><i class="icon-wrench icon-white"></i> Settings</a></li>
                                <li><a href="/wp-admin/admin.php?page=wpengine-common"><i class="icon-cog icon-white"></i> WP Engine Settings</a></li>
                                <li><a href="/wp-admin/options-general.php?page=limit-login-attempts"><i class="icon-wrench icon-white"></i> Login Attempts</a></li>
                                <li class="divider"></li>
                            <?php } ?>
                            <li><a href="/wp-admin/admin.php?page=dashboard"><i class="icon-home icon-white"></i> My Dashboard</a></li>
                            <li><a href="<?php echo network_site_url(); ?>"><i class="icon-globe icon-white"></i> Dewsly.com</a></li>
                            <li><a href="/wp-admin/admin.php?page=profile"><i class="icon-user icon-white"></i> My Profile</a></li>
                            <li><a target="_blank" href="http://support.dewsly.com"><i class="icon-question-sign icon-white"></i> Support</a></li>
                            <li><a onclick="return confirm(\'Do you really want to logout?\')" href="<?php echo get_site_url(1); ?>/?my_error=logout"><i class="icon-off icon-white"></i> Logout</a></li>
                        </ul>
                    </div>
                    <?php } ?>
                </div>

CSS:

#author{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        background-color:#212121;
        height:70px;
        z-index: 1001;
        overflow:hidden;
        cursor:hand;
        padding:10px;
        border-top:1px solid #595555;
    }
#secondaryBox {
        height: 0px;
        position:fixed;
        bottom:70px;
        width:100%;
        overflow:auto !important;
        left:0;
        z-index: 100;
    }
4

2 回答 2

0

After quite a bit more reading the issue was having a fixed position div within a scrolling div. The information given in the comments of the post linked from here gave me the guidance. Although that is frustrating, at least I know how to resolve the issue now.

http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

于 2013-03-19T11:29:56.980 回答
0

丑陋但可行的解决方案;

setTimeout(function() {
        $("#fixedElement").css("right", "373px");
    }, 100);

我不知道为什么,在您更改/设置元素的位置后,它再次变得可见。

于 2014-08-21T23:58:02.777 回答