Add dfw-scroll-visibility component: implement visibility control based on scroll position, enhance styles for visibility transitions, and update main layout to include the new component for improved user experience.

Author: JumpLink

src/ts/components/dfw-scroll-visibility/dfw-scroll-visibility.component.scss

@@ -0,0 +1,15 @@
+dfw-scroll-visibility {
+  display: block;
+  /* No size in flow; fixed child is out of flow. visibility on host hides the button. */
+}
+
+dfw-scroll-visibility[data-visible="false"] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+dfw-scroll-visibility[data-visible="true"] {
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}

src/ts/components/dfw-scroll-visibility/dfw-scroll-visibility.component.ts

@@ -0,0 +1,68 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+const VISIBLE_SCROLL_START = 0.1; // show after 10% from top
+const VISIBLE_SCROLL_END = 0.9;   // hide again in last 10%
+
+/**
+ * Wrapper component that shows its child content only when the page is scrolled
+ * in the "middle" 80% (between 10% and 90% of scroll range). Use for fixed
+ * elements like a call button that should be hidden near the top and bottom.
+ * Pass the content as child nodes (like dfw-contact-map).
+ */
+export class DfwScrollVisibilityComponent extends Component {
+  public static tagName = "dfw-scroll-visibility";
+
+  protected autobind = true;
+
+  static get observedAttributes(): string[] {
+    return [];
+  }
+
+  private rafId: number | null = null;
+  private readonly boundUpdateVisibility = () => this.updateVisibility();
+
+  protected connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("data-visible", "false");
+    this.init(DfwScrollVisibilityComponent.observedAttributes);
+  }
+
+  protected async afterBind() {
+    await super.afterBind();
+    this.updateVisibility();
+    window.addEventListener("scroll", this.boundUpdateVisibility, { passive: true });
+  }
+
+  protected disconnectedCallback() {
+    window.removeEventListener("scroll", this.boundUpdateVisibility);
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+    }
+    super.disconnectedCallback();
+  }
+
+  private updateVisibility(): void {
+    if (this.rafId !== null) return;
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
+      const visible =
+        maxScroll <= 0 ||
+        (window.scrollY >= maxScroll * VISIBLE_SCROLL_START &&
+         window.scrollY <= maxScroll * VISIBLE_SCROLL_END);
+      this.setAttribute("data-visible", visible ? "true" : "false");
+    });
+  }
+
+  protected requiredAttributes(): string[] {
+    return [];
+  }
+
+  protected template(): string | null {
+    if (hasChildNodesTrim(this)) {
+      return null;
+    }
+    return `<p>Provide child content to show in the middle 80% scroll range.</p>`;
+  }
+}

src/ts/components/index.scss

@@ -1,3 +1,4 @@
 @import './dfw-background-gears/dfw-background-gears.component';
 @import './dfw-contact-map/dfw-contact-map.component';
 @import './dfw-gallery/dfw-gallery.component';
+@import './dfw-scroll-visibility/dfw-scroll-visibility.component';

src/ts/components/index.ts

@@ -1,3 +1,4 @@
 export { DfwBackgroundGearsComponent } from "./dfw-background-gears/dfw-background-gears.component.js";
 export { DfwContactMapComponent } from "./dfw-contact-map/dfw-contact-map.component.js";
-export { DfwGalleryComponent } from "./dfw-gallery/dfw-gallery.component.js";
+export { DfwGalleryComponent } from "./dfw-gallery/dfw-gallery.component.js";
+export { DfwScrollVisibilityComponent } from "./dfw-scroll-visibility/dfw-scroll-visibility.component.js";

src/views/layouts/main.pug

@@ -18,5 +18,6 @@ html(lang='de')
       router-view#main(listen-all-links='true')
         block content
       include ../partials/footer.pug
-      include ../partials/fixed-call-button.pug
+      dfw-scroll-visibility
+        include ../partials/fixed-call-button.pug
     script(src=basePath + '/ts/main.ts', type='module')