油墨框架固定标头

Question

我试图用墨水框架 (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的源代码？

在上一个版本中，我们有一个bug，如果元素大于视口宽度的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"> 
....

属性“数据激活-内布局”是可选的，以使其工作在选定的视口大小。