[英]Foundation 5.0.3 just downloaded, top-bar sticky not working
我正在努力将现有的基础3应用程序升级到新基础5。
我把JS装好了: <script src="js/foundation/foundation.topbar.js"></script>
但我在滚动时看到此错误: TypeError: this.settings.sticky_topbar is undefined
我已经三次检查我在Zurb网站上直接使用v 5.0.3,我的标记非常简单:
<nav class="top-bar sticky" data-topbar="">
<!-- Title -->
<ul class="title-area">
<li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<!-- Top Bar Section -->
<section class="top-bar-section">
<!-- Top Bar Left Nav Elements -->
<ul class="left">
<!-- Search | has-form wrapper -->
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input placeholder="Find Stuff" type="text">
</div>
<div class="large-4 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</ul>
</section>
</nav>
任何想法将非常感谢! 我知道这种行为之前曾被报道为早期版本中的一个错误,但我在网上找到的所有内容都说5.0.3应该可以正常工作吗?
谢谢
-詹姆士
阅读了foundation.topbar.js后,我发现只有topbarContainer具有“sticky”类才会导致分配self.settings.sticky_topbar。
因此,在导航上方添加div.sticky会修复所有内容。 如果有人关心的话,这是我的新标记:
<div class="sticky">
<nav class="top-bar" data-topbar>
<!-- Title -->
<ul class="title-area">
<li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<!-- Top Bar Section -->
<section class="top-bar-section">
<!-- Top Bar Left Nav Elements -->
<ul class="left">
<!-- Search | has-form wrapper -->
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input placeholder="Find Stuff" type="text">
</div>
<div class="large-4 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</ul>
</section>
</nav>
</div>
通常Zurb在他们的在线文档中非常棒。 我希望有一个例子,在某处有一个粘顶棒。
谢谢!
-詹姆士
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.