Как сделать так, чтобы когда панель поднималась до верхнего края браузера, то она останавливала своё движение?

Question

[Cod Rob]

Например, есть панель, которая имеет такой класс стилей(у меня с техническим плохо, поэтому могу неправильные понятия и слова писать):

.menu {
            height: 82%;
            width: 200px;
            position: fixed; 
        }

и имеет свои стили:

.menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: rgba(0, 0, 0, 0.50);
            position: fixed;
            margin-top: -0.4%;
            overflow: auto;
            height: 100%;
        }

        .menu a {
            display: block;
            color: #c46d04;
            padding: 8px 16px;
            text-decoration: none;
            border-top: 1px dashed #c46d04;
            border-bottom: 1px dashed #c46d04;
            border-right: 1px dashed #c46d04;
            border-left: 5px solid #c46d04;
        }

            .menu a:hover {
                background-color: #c46d04;
                color: rgba(0, 0, 0, 0.80);
            }

Сама панель:

<divclass="menu">
            <ul>
                <li><a href='@Url.Page("/Index")'>Поиск</a></li>
                <li><a href='@Url.Page("/added-users")'>Пользователи</a></li>
            </ul>
        </div>

Так вот в чём вопрос: как сделать, чтобы панель поднималась вверх(панель находится на некотором расстоянии от верхнего края браузера) на такое же расстояние, на которое мы двигаемся вниз по вертикальной полосе прокрутки, но как только панель достигала верхнего края, то она прекращала своё движение вверх?
Насчёт случая, если какой-то инфы не хватает, говорите - я докину инфы.
Если вы заметили какой-то момент в коде, который кажется глупым, неразумным или нерациональным, то забейте на это и просто предложите свой вариант решения проблемы.

Answer 1

[Роман Якимчук]

Не совсем понял задачу, но похоже вам нужен просто `position: sticky`. В этом случае элемент будет "приклеен" к границе окна при прокрутке страницы. Положение такого элемента относительно границ окна можно регулировать, насколько я помню, через `top`, `right`, `bottom`, `left`.

https://developer.mozilla.org/en-US/docs/Web/CSS/p...
Вот здесь есть пример как оно работает