Zurb foundation 6 sticky menu в проекте, который был создан с генератором-gulp-angular

У меня было настроено два проекта, первый вручную, а другой с помощью генератора-gulp-angular tools(с » jQuery 2.X” и «официальная реализация jQuery Foundation»). В обоих, foundation.css и foundation.js были введены в индекс.формат html.

индекс.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>

индекс.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>

Как вы можете видеть, я хочу иметь липкое меню, которое прилипает к элементу «stickhere».

В первом проекте sticky menu работает как положено. Но во втором проекте меню прокручивается вверх/вниз с прокруткой страницы вверх / вниз.

Используя контекстное меню Inspect в Google Chrome, я скопировал элемент «data-sticky-container» из обоих проектов во время выполнения и результат:

Первый проект

<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>

Во втором случае атрибуты «is-at-top is-Stick»не вводятся в классовую часть элемента Nav, а также отличаются по стилю.

Как я могу иметь рабочее липкое меню во втором проекте?

Версия учредительства : 6.2.3 (также испытанный 6.2.1)

версия jquery: 2.2.4

генератор-gulp-угловой: 1.7

> Изменить 1:>
Также это предупреждение отображается в журнале браузера:

Попытался инициализировать sticky на элементе, который уже имеет основу
плагин.

1 ответ

  1. Я не знаю, в чем разница между двумя проектами. Но, изменяя элемент nav во втором проекте, на

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

    решить проблему.