javascript - 带有Ink框架的固定 header

我正在尝试使用the Ink framework（CSS / JS）修复标题，以使其在滚动时不会在页面上移动，而且我似乎也无法这样做。

HTML：

<div id="topbar">
    <nav class="ink-navigation ink-grid hide-all show-large">
        <ul class="menu horizontal flat blue">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item</a>
            </li>
            <li>
                <a href="#">Menu item<i class="icon-caret-down"></i></a>
                    <ul class="submenu">
                        <li>
                            <a href="#">Submenu item</a>
                        </li>
                        <li>
                            <a href="#">Submenu item</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <nav class="ink-navigation ink-grid hide-all show-medium show-small">
            <ul class="menu vertical flat blue">
                <li>
                    <a class="logoPlaceholder push-left" href="#" title="Site Title">Home</a>
                    <button class="toggle push-right" data-target="#topbar_menu" id="toggleVisibility">
                        <span class="icon-reorder"></span>
                    </button>
                </li>
           </ul>
           <ul class="menu vertical flat blue hide-all" id="topbar_menu">
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                   <a href="#">Menu item</a>
                </li>
                <li>
                      <a href="#">Menu item</a>
                </li>
                <li>
                      <a href="#">Menu item</a>
                </li>
                <li>
                      <a href="#">Menu item</a>
                </li>
                <li>
                      <a href="#">Menu item</a>
                </li>
                <li>
                      <a href="#">Menu item</a>
                </li>
                <li class="">
                      <a class="toggle" data-target=".submenu" href="#">Menu item<i class="icon-caret-down"></i></a>
                        <ul class="submenu hide-all dropdown">
                            <li>
                                <a href="#">Submenu item</a>
                            </li>
                            <li>
                                <a href="#">Submenu item</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="border">
            </div>
        </div>

我查看并尝试过CSS包，但无法正常进行。

任何帮助，将不胜感激！

最佳答案

您使用的是最新版本还是使用github的源代码？

在最新版本中，我们存在一个错误，如果该元素的宽度大于视口宽度的90％，它将无法正常工作。

从https://github.com/sapo/Ink/tree/develop/dist获取最新版本并使用：

<div id="topbar" data-offset-top="0" class="sticky" data-activate-in-layouts="large,medium,small">
....

属性“ data-activate-in-layouts”是可选的，以使其在选定的视口大小中起作用。