css - SlickNav ヘッダーが原因でメニューがスクロールできなくなる問題を修正

Question

ここで SlickNav 固定ヘッダーのソリューションを試しました: SlickNav で固定ヘッダーを作成する方法

これは機能しますが、問題があります。長い SlickNav メニュー リストがスクロールできなくなり、画面の下部にスタックします。解決策はありますか？

ありがとうございました。

編集:問題を再現するための元の slicknav パッケージからの私の変更:

1) dist/slicknav.css の 78 行目 (.slicknav_menu) の後に次の行を追加して、固定ヘッダーを取得します。

/* 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) 非常に長いメニュー項目リストを demo/index.html の親 2、項目 7 (39 行目) の後に追加します。

<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) で固定ヘッダーを設定する前のように、メニュー リストが長すぎてスクロールできなくなるため、最後の項目行「最後に追加された項目」が表示されません。

ちなみに検索すると、他のユーザーにも同様の問題があることがわかりました： SlickNavで固定ヘッダーを作成する方法