javascript - 使用 Ink 框架固定 header

Question

我正在尝试使用 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 包，但无法正常运行。

如有任何帮助，我们将不胜感激!

Answer 1

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

在上一个版本中，我们有一个错误，如果元素宽度超过视口(viewport)宽度的 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”是可选的，以使其在选定的视口(viewport)尺寸下工作。