Zurb基金会6粘性菜单中的一个项目,已经创建了发电机吞咽角



我已经建立了两个项目,第一个是手动的,另一个是使用generator gull angular工具(带有"jQuery 2.x"one_answers"Foundation的官方jQuery实现"选项)。在两者中,foundation.css和foundation.js都被注入到index.html中

index.html(第一个项目):

<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body >
….
<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<script type="text/javascript">
$(document).foundation();
})
</script>
</body>
</html>

index.html(第二个项目):

<!doctype html>
<html ng-app="test">
<head>
...
<link rel="stylesheet" href="app/index.css"> //foundation.css has been injected in index.css
</head>
<body>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/foundation-sites/dist/foundation.js">  </script>
</body>
</html>

这是两个项目中相同的HTML文件的一部分:

<div id="stickhere" />
<div data-sticky-container>
<nav class="sticky" data-sticky data-options="marginTop:0;anchor:stickhere;"   >
<ul class="menu" data-magellan >
<li><a href="#foo1">#foo1</a></li>
<li><a href="#foo2">#foo2</a></li>
<li><a href="#foo3">#foo3</a></li>
<li><a href="#foo4">#foo4</a></li>
<li><a href="#foo5">#foo5</a></li>
<li><a href="#foo6">#foo6</a></li>
</ul>  
</nav>

正如你所看到的,我想要一个粘性菜单,坚持"粘贴在这里"元素。

在第一个项目中,粘性菜单按预期工作。但在第二个项目中,菜单上下滚动,页面上下滚动。

使用Google Chrome中的Inspect上下文菜单,我在运行时从两个项目中复制了"数据粘性容器"元素,结果是:

第一个项目

<div data-sticky-container="" class="sticky-container" style="height: 40px;">
<nav class="sticky is-at-top is-stuck" data-sticky="69v1vb-sticky" data-options="marginTop:0;anchor:stickhere;" data-resize="orhhfj-sticky" data-events="resize" style="max-width: 1200px; margin-top: 0em; top: 0px; bottom: auto; left: 32.5px;">
<ul class="menu" data-magellan="tysnpu-magellan" data-resize="q54qzr-magellan" data-scroll="q54qzr-magellan" id="q54qzr-magellan" data-events="resize">
<li><a href="#foo1" class="">#foo1</a></li>
<li><a href="#foo2" class="active">#foo2</a></li>
<li><a href="#foo3" class="">#foo3</a></li>
</ul>  
</nav>

第二个项目

<div data-sticky-container="" class="sticky-container" style="height: 40px;">
<nav class="sticky" data-sticky="9defbv-sticky" data-options="marginTop:0;anchor:stickhere;" data-resize="yvriij-sticky" style="max-width: 1200px;" data-events="resize">
<ul class="menu" data-magellan="07xwd5-magellan" data-resize="c7qbpd-magellan" data-scroll="c7qbpd-magellan" id="c7qbpd-magellan" data-events="resize">
<li><a href="#foo1" class="active">#foo1</a></li>
<li><a href="#foo2" class="">#foo2</a></li>
<li><a href="#foo3" class="">#foo3</a></li>
</ul>  
</nav>

在第二个例子中,Nav元素的类部分和样式部分中未注入的"is at top is stick"属性是不同的。

如何在第二个项目中使用粘性菜单?

基础版本:6.2.3(也测试了6.2.1)

jquery版本:2.2.4

发电机吞咽角度:1.7

>编辑1:浏览器日志也显示此警告:

尝试在已经有Foundation的元素上初始化粘性插件。

I‌‌不知道这两个项目有什么不同。但是,将第二个项目中的导航元素更改为

<nav class="sticky" data-sticky data-top-anchor="stickhere:top">

解决了问题。

最新更新