Я хочу получить макет, где меню фиксируется в левой нижней части страницы. Одна страница, на которой вы продолжаете прокручивать, и фон будет go различных цветов, и меню должно адаптироваться к нему.
![Layout](https://i.stack.imgur.com/TbbFW.png)
Способ Я достигаю макета, делая что-то вроде этого
<body>
<nav>
<ul>
<li></li>
...
</ul>>
</nav>
<div class="container1">
...
</div>
<div class="container2 black-bg">
...
</div>
<div class="container3">
...
</div>
<div class="container4 black-bg">
...
</div>
</body>
css в основном устанавливает навигацию, которая будет зафиксирована в левом нижнем углу. Контейнеры имеют ширину и высоту 100vh, и я изменяю их фон, используя класс black-gb
.navigation-menu {
position:fixed;
width: 370px;
height: 100vh;
bottom: 0;
left: 0;
}
.container {
display:flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.black-bg {
background-color:black;
}
Я читал, что некоторые из них возможны с помощью режима mix-blend-mode, хотя я и не имею я не мог понять это до сих пор. Я бы предпочел чистое решение CSS, не планируя вообще поддерживать IE. Хотя, если у вас есть другие подходы, они тоже будут признательны.
Спасибо!