2

我在这里尝试了 SlickNav 固定标题的解决方案： How to make a fixed header with SlickNav

这可行，但我有一个问题：我冗长的 SlickNav 菜单列表无法再滚动，它卡在屏幕底部。有解决办法吗？

谢谢你。

编辑：我对原始 slicknav 包的更改以重现问题：

1) 在第 78 行 (.slicknav_menu) 之后将以下行添加到 dist/slicknav.css 以获得固定标题：

/* change to make sticky menu */
/* but this overrides top of each page, to fix */
/* also the whole menu could no longer be scrolled!  */
/*  https://stackoverflow.com/questions/19854185/how-to-make-a-fixed-header-with-slicknav*/
  display: block;
  position: fixed;
  width: 100%;
  top: 0;

2) 在 Parent 2, item 7 (line 39) 之后添加一个很长的菜单项列表到 demo/index.html ：

<ul id="menu">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
    <li>Added item First</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item 1</li>
    <li>Added item Last</li>

</ul>

现在，当您使用移动模式时，看不到最后一个项目行“最后添加的项目”，因为菜单列表太长并且不再像在 1) 中设置固定标题之前那样可滚动。

顺便搜索一下，我发现其他用户也有类似的问题： How to make a fixed header with SlickNav

4

0 回答 0