0

我正在尝试使用Ink 框架(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 包切换，但无法启动。

任何帮助，将不胜感激！

4

1 回答 1

3

您使用的是最新版本还是使用来自 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”是可选的，以使其在选定的视口大小下工作。

于 2014-01-13T14:50:52.557 回答