UIKIT 3.10 header playground

by levchenko_d

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<div class="header">
  Header
</div>

<div class="section light"></div>
<div class="section dark"></div>
<div class="section light"></div>
<div class="section dark"></div>
<div class="section light"></div>

SCSS

.header {
  position: sticky;
  height: 50px;
  padding: 10px;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  
  .dark {
     background: rgba(0, 0, 0, 0.8);
  }
}

.section {
  height: 100vh;
  width: 100%;
  
  &.dark {
    background: #000;
  }
}