Меню фиксированной позиции, содержимое вне окна просмотра

Question

У меня есть навигационное меню, которое занимает всю высоту видового экрана с использованием min-height, это также фиксированная позиция, но это представляет проблему.

.menu{ 
    min-height:100vh; 
    height:auto; 
    position:fixed; 
} 

Содержимое внутри меню может отображаться дальше, чем окна просмотра, если смотреть в маленьких окнах браузера или резолюциях, как мобильные, так что вы не можете увидеть последние опции меню.

Я ищу наилучший подход к этому, независимо от того, динамично ли он меняет положение css с помощью jQuery (который, кажется, является решением, используемым для меню администратора WordPress) или путем настройки верхней или маржинальной позиции на прокрутке, как в этот пример:

https://queen-theme.myshopify.com/

Я хочу тот же пользовательский опыт, так что элемент действует (или дает впечатление) наличия абсолютного положения, пока нижний конец ее не попадает в поле зрения, то она станет фиксированной должность.

Эти меню довольно распространены, поэтому я уверен, что есть несколько способов сделать это?

Answer 1

Вы всегда можете использовать правило CSS @media, которое будет применять свойства CSS в зависимости от определенных условий. В приведенном ниже примере будет отображаться цвет фона экрана в lightblue для размера экрана 500 пикселей или менее.

@media only screen and (max-width: 500px) { 
body { 
    background-color:lightblue; 
} 

}

Вы можете найти более подробную информацию here