Имейте липкую панель навигации поверх содержащих блоков. ⇐ CSS

[Anonymous]

Я долго ломал голову над тем, как сделать прикрепленную панель навигации поверх содержимого страницы.
У меня есть веб-страница, содержащая заголовок, основной блок и нижний колонтитул.
Я хочу, чтобы в главном блоке была панель навигации, позволяющая легко перемещаться между различными разделами его содержимого. Эта панель навигации должна быть всегда доступна пользователю, пока он перемещается внутри основного блока, поэтому я хочу сделать ее прикрепленной.
Но вот что усложняет: заключается в том, что я хочу, чтобы панель навигации располагалась поверх содержимого основного блока, чтобы каждый раздел основного блока имел цвет фона, распространяющийся на всю ширину страницы.
В следующем примере я воссоздал нечто близкое к тому, что хочу, за исключением того, что каждый основной блок контента должен занимать всю ширину страницы.
Как бы я это сделал? ?

Код: Выделить всё

.header,
.footer {
background-color: silver;
height: 40vh;
}

.main {
display: flex;
}

.nav > .navcontent {
position: sticky;
top: 0;
}

.content > .block {
height: 80vh;
padding-left: 20%;
padding-right: 20%;
}

.content > .block.-b1 {
background-color: aqua;
}

.content > .block.-b2 {
background-color: teal;
}

.content > .block.-b3 {
background-color: blue;
}

Код: Выделить всё

Header




My content
Integer interdum varius diam. Nam aliquam  velit a pede. Vivamus dictum nulla et wisi. Vestibulum a massa.  Donec vulputate nibh vitae risus dictum varius. Nunc suscipit, nunc  nec facilisis convallis, lacus ligula bibendum nulla, ac  sollicitudin sapien nisl fermentum velit. Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. Nullam commodo dui ut augue  molestie scelerisque. Sed aliquet rhoncus tortor. Fusce laoreet,  turpis a facilisis tristique, leo mauris accumsan tellus, vitae  ornare lacus pede sit amet purus. Sed dignissim velit vitae ligula.  Sed sit amet diam sit amet arcu luctus ullamcorper.

Integer interdum varius diam. Nam aliquam  velit a pede. Vivamus dictum nulla et wisi. Vestibulum a massa.  Donec vulputate nibh vitae risus dictum varius. Nunc suscipit, nunc  nec facilisis convallis, lacus ligula bibendum nulla, ac  sollicitudin sapien nisl fermentum velit. Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. Nullam commodo dui ut augue  molestie scelerisque. Sed aliquet rhoncus tortor. Fusce laoreet,  turpis a facilisis tristique, leo mauris accumsan tellus, vitae  ornare lacus pede sit amet purus. Sed dignissim velit vitae ligula.  Sed sit amet diam sit amet arcu luctus ullamcorper.

Integer interdum varius diam. Nam aliquam  velit a pede. Vivamus dictum nulla et wisi. Vestibulum a massa.  Donec vulputate nibh vitae risus dictum varius. Nunc suscipit, nunc  nec facilisis convallis, lacus ligula bibendum nulla, ac  sollicitudin sapien nisl fermentum velit. Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. Nullam commodo dui ut augue  molestie scelerisque. Sed aliquet rhoncus tortor. Fusce laoreet,  turpis a facilisis tristique, leo mauris accumsan tellus, vitae  ornare lacus pede sit amet purus. Sed dignissim velit vitae ligula.  Sed sit amet diam sit amet arcu luctus ullamcorper.



[list]
Link 1
Link 2
Link 3
[/list]



Footer

Подробнее здесь: https://stackoverflow.com/questions/786 ... ing-blocks