- 首页
- 移动开发
- Foundation 6 移动搜索栏在 Android 上一直停留在底部
Foundation 6 移动搜索栏在 Android 上一直停留在底部
[英] Foundation 6 Mobile Search Bar Sticking to Bottom on Android
本文介绍了Foundation 6 移动搜索栏在 Android 上一直停留在底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在 Android 设备(使用任何浏览器)上浏览网站
需要明确的是，此问题不会在 Apple 设备或 PC 上发生.
<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="东密歇根大学徽标"/></a>
<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">搜索</span><i class="fa fa-search" aria-hidden="true"></i></a></li>
<div id="site-title" class="row"><div class="small-12 列"><ouc:div label="site-name" button-text="站点名称" 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>
<xsl:if test="($ou:topnav!='off')"><div class="small-12 columns skip-main-nav"><a class="show-on-focus show-for-sr" href="#maincontent">跳过全局导航</a>
</xsl:if>
<div data-sticky-container=""><div data-sticky="" data-top-anchor="site-title:bottom" data-options="marginTop:0;"样式="宽度: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">打开/关闭菜单</div><div class="title-bar-title" data-toggle="offCanvasLeft">搜索&导航
<!-- 如果顶部导航，添加栏 --><xsl:if test="$ou:topnav='on' 或 $ou:topnav='true' 或 $ou:topnav='1' 或 $ou:topnav='yes'"><!-- 顶级导航是真的吗?--><div id="main-nav"><div class="row show-for-large 折叠"><div class="small-12 列"><nav class="menu-box {if ($ou:action != 'pub') then 'omni-primary-nav' else ''}"><!-- 'omni-primary-nav' class用于在 OUC 预览中设置导航列表样式 --><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"><?echo $navigation->primaryMenu;?></xsl:text></xsl:if></ouc:div></nav>
</xsl:if>
...一堆XSL</标题>
解决方案
在默认情况下，元素似乎不适合小屏幕.
小屏Sticky可以通过添加开启数据选项="stickyOn:small;"或者data-sticky-on="small"
给元素数据粘性属性.
When navigating the site http://emich.edu on Android devices (with any browser), the sticky mobile navigation menu sticks to the bottom of the page if one clicks through to another page, scrolls to the bottom of that page, and clicks the back button. A picture of the issue is attached.
This should not happen; the nav should always be under the site header. We are using Foundation 6.3 and have tried several other versions. We have even tried Foundation outside of this site with no extra markup, and the same result is produced. I can't seem to find any other threads that describe a similar problem. Could it be a problem with Android?
The phones we have tested use Android v. 7.0 and 6.0.1.
To be clear, this problem does not happen on Apple devices nor PCs.
<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 & 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"><? echo $navigation->primaryMenu; ?></xsl:text>
</xsl:if>
</ouc:div>
</nav>
</div>
</div>
</div>
</xsl:if>
</div>
</div>
</div>
...a bunch of XSL
</header>
解决方案
It seems by default, the elements aren't sticky for small screens.
Sticky for small screens can be turned on by adding
data-options="stickyOn:small;"
or
data-sticky-on="small"
To the element data-sticky attribute.
这篇关于Foundation 6 移动搜索栏在 Android 上一直停留在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
