Question

我在这里尝试了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）在父2，第7项（第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>

现在，当您使用移动模式时，最后一个项目行＆＃34;最后添加项目＆＃34;无法看到，因为菜单列表很长，并且不再像在1）中设置固定标题之前那样可滚动。

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

SlickNav Fixed标头导致菜单不可滚动

0 个答案: