diff --git a/docs/components/window/frame.ejs b/docs/components/window/frame.ejs
index 9fbd803..c2f0e60 100644
--- a/docs/components/window/frame.ejs
+++ b/docs/components/window/frame.ejs
@@ -70,4 +70,24 @@
         </div>
       </div>
     `) %>
+
+    <p>
+      To make the aero effect move when scrolling, or changing the viewport size, change the <code>background-attachment</code> property of the <code>.title-bar</code> to <code>fixed</code> or <code>scroll</code>, depending on your requirements.
+    </p>
+    <%- example(`
+      <div class="background">
+        <div class="window glass active" style="max-width: 100%">
+          <div class="title-bar" style="background-attachment: fixed;">
+            <div class="title-bar-text">A glass window frame with fixed background-attachment</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+          <div class="window-body has-space">
+            <p>The aero effect is now changing with the scroll position.</p>
+          </div>
+        </div>
+      </div>
+    `) %>
 </section>
\ No newline at end of file
diff --git a/gui/_window.scss b/gui/_window.scss
index 50c36d6..265514f 100644
--- a/gui/_window.scss
+++ b/gui/_window.scss
@@ -213,6 +213,7 @@
 
     > .title-bar {
       background: var(--window-background-glass-stripes);
+      background-attachment: local;
     }
   }