我已经建立了两个项目,第一个是手动的,另一个是使用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">
解决了问题。