diff --git a/assets/css/common/header.css b/assets/css/common/header.css
index 64894da4..9b9e523d 100644
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@@ -1,3 +1,11 @@
+header.header-sticky {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    background: var(--theme);
+    z-index: 1000;
+}
+
 .nav {
     display: flex;
     flex-wrap: wrap;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4a7291e2..500c3b47 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -39,7 +39,7 @@
 </script>
 {{- end }}
 
-<header class="header">
+<header class="header {{ if (site.Params.stickyHeader) }}header-sticky{{ end }}">
     <nav class="nav">
         <div class="logo">
             {{- $label_text := (site.Params.label.text | default site.Title) }}