Foundation 6 移动搜索栏在 Android 上固定在底部答案

【问题标题】：Foundation 6 Mobile Search Bar Sticking to Bottom on AndroidFoundation 6 移动搜索栏在 Android 上固定在底部
【发布时间】：2017-08-21 21:25:04
【问题描述】：

在 Android 设备（使用任何浏览器）上导航网站 http://emich.edu 时，如果单击另一页面，则粘性移动导航菜单会粘在页面底部，滚动到该页面底部，然后单击返回键。附上问题的图片。

这不应该发生；导航应始终位于站点标题下方。我们正在使用 Foundation 6.3 并尝试了其他几个版本。我们甚至在没有额外标记的情况下在该站点之外尝试了 Foundation，并且产生了相同的结果。我似乎找不到任何其他描述类似问题的线程。会不会是安卓的问题？

我们测试的手机使用 Android v. 7.0 和 6.0.1.

需要明确的是，这个问题不会发生在 Apple 设备或 PC 上。

<header class="wide-image">
        <div class="brand front-top">
            <div class="row top-row" data-equalizer="branding">
                <div class="large-4 medium-12 small-12 columns logo-combine" data-equalizer-watch="branding">
                    <div class="front-title">
                        <a href="{{f:59436}}"><img src="{{f:57957}}" alt="Eastern Michigan University logo" /></a>
                    </div>
                </div>
                <div class="large-8 medium-12 show-for-large columns" data-equalizer-watch="branding">
                    <div class="row idrow front">
                        <div class="small-12 columns secondary-nav">
                            <xsl:copy-of select="ou:includeFile('/_resources/inc/site-search.inc')" />
                            <ul id="quick-links-top">
                                <xsl:copy-of select="ou:includeFile('/_resources/inc/quick-links.inc')" />
                                <li id="search-glass"><a href="#search-region"><span class="visuallyhidden">Search</span><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="site-title" class="row">
                <div class="small-12 columns">
                    <ouc:div label="site-name" button-text="Site Name" group="_Admin" path="{$ou:siteroot}/_site/inc/name.pcf">
                        <xsl:if test="$ou:action = 'pub' and $ou:siteroot != '/'"><xsl:copy-of select="ou:includeFile(concat($ou:siteroot,'/_site/inc/name.inc'))" /></xsl:if>
                    </ouc:div>
                </div>
                <xsl:if test="($ou:topnav!='off')">
                    <div class="small-12 columns skip-main-nav">
                        <a class="show-on-focus show-for-sr" href="#maincontent">Skip Global Navigation</a>
                    </div>
                </xsl:if>
            </div>
            <div data-sticky-container="">
                <div data-sticky="" data-top-anchor="site-title:bottom" data-options="marginTop:0;" style="width:100%">
                    <div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
                        <button class="menu-icon" type="button" data-toggle="offCanvasLeft" aria-expanded="false" aria-controls="offCanvasLeft">
                            <div class="visuallyhidden">Open/Close Menu</div>
                        </button>
                        <div class="title-bar-title" data-toggle="offCanvasLeft">Search &amp; Navigation</div>
                    </div>
                    <!-- If top nav, add bar -->
                    <xsl:if test="$ou:topnav='on' or $ou:topnav='true' or $ou:topnav='1' or $ou:topnav='yes'"><!-- Top nav is truthy? -->
                        <div id="main-nav">
                            <div class="row show-for-large collapse">
                                <div class="small-12 columns">
                                    <nav class="menu-box {if ($ou:action != 'pub') then 'omni-primary-nav' else ''}"><!-- 'omni-primary-nav' class used to style nav list within OUC preview -->
                                        <ouc:div label="top-nav" button-text="Navigation" group="_Admin" path="{$ou:siteroot}/_site/inc/navigation.pcf">
                                            <xsl:if test="$ou:action = 'pub'">
                                                <xsl:text disable-output-escaping="yes">&lt;? echo $navigation-&gt;primaryMenu; ?&gt;</xsl:text>
                                            </xsl:if>
                                        </ouc:div>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </xsl:if>
                </div>
            </div>
        </div>

        ...a bunch of XSL 

    </header>

【问题讨论】：

没有你的代码我们应该如何调试？
正在处理它...

标签： android zurb-foundation

【解决方案1】：

默认情况下，这些元素似乎对小屏幕没有粘性。

小屏幕的粘性可以通过添加打开数据选项="stickyOn:small;" 或者 data-sticky-on="小"

到元素 data-sticky 属性。

【讨论】：

我确信这完全没有任何努力。

【解决方案2】：

似乎默认情况下它不粘在“小”上的原因是“节省房地产”。

我认为是这个bug。请参阅那里提到的解决方法。将讨论移到那里...

【讨论】：