AMPERION_Webpage/layouts/index.html

{{ define "main" }}
Um den ersten Bereich der Seite beim Scrollen nach unten verschwinden zu lassen und beim Scrollen nach ganz oben wieder erscheinen zu lassen, kannst du JavaScript verwenden, um den Bereich zu verstecken oder anzuzeigen, basierend auf der Scroll-Position. Hier ist, wie du das machen kannst:
Schritt 1: Füge eine ID oder Klasse zum Header hinzu

Füge eine ID oder Klasse zum <header>-Element hinzu, damit du es leicht mit JavaScript ansprechen kannst.

<header id="mainHeader">


  {{ with .Params.banner }}
    {{ if .enable }}
      <section
        class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
        style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;"
      >
        <div class="my-container" style="position: relative; z-index: 2;">
          <!-- Logo-Container mit 2 Frames (40% / 60%), 10% Rand links & rechts -->
          <div class="logo-container">
            <!-- Frame 1 -->
            <div class="frame1">
              <img
                src="{{ .logo_image1 | relURL }}"
                alt="Logo Frame 1"
                class="banner-logo"
              >
            </div>
            <!-- Frame 2 -->
            <div class="frame2">
              <img
                src="{{ .logo_image2 | relURL }}"
                alt="Logo Frame 2"
                class="banner-logo"
              >
            </div>
          </div>



          <!-- Titel / Content / Button -->
          <div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box; overflow-wrap: break-word;">
            {{ with .title }}
              <h1 class="title-custom title-custom-margin fade-in-title">
                {{ . | markdownify }}
              </h1>
            {{ end }}

            {{ with .button }}
              {{ if .enable }}
                <div
                  class='scrolldown'
                  onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
                  style="--color: rgb(0, 0, 0); cursor: pointer;"
                >
                  <div class="chevrons">
                    <div class='chevrondown'></div>
                    <div class='chevrondown'></div>
                  </div>
                </div>
              {{ end }}
            {{ end }}
          </div>
        </div>
      </section>
    {{ end }}
  {{ end }}
</header>




<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrolldown = document.querySelector('.scrolldown');
    scrolldown.addEventListener('click', function() {
      const serviceSection = document.getElementById('service');
      const offset = 100; // Der Offset in Pixeln

      // Berechne die Position, zu der gescrollt werden soll
      const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;

      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth' // Sanftes Scrollen
      });
    });

    window.addEventListener("scroll", function() {
      if (window.scrollY > 100) {
        scrolldown.classList.add('hide');
      } else {
        scrolldown.classList.remove('hide');
      }
    });
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var header = document.getElementById('mainHeader');
    var lastScrollPosition = window.scrollY;

    window.addEventListener('scroll', function() {
      var currentScrollPosition = window.scrollY;

      // Wenn der Benutzer nach unten scrollt, verstecke den Header
      if (currentScrollPosition > lastScrollPosition) {
        header.style.top = '-100vh'; // Passe diesen Wert an die Höhe deines Headers an
      }
      // Wenn der Benutzer nach oben scrollt, zeige den Header wieder an
      else {
        header.style.top = '0';
      }

      // Wenn der Benutzer ganz nach oben scrollt, zeige den Header an
      if (currentScrollPosition === 0) {
        header.style.top = '0';
      }

      lastScrollPosition = currentScrollPosition;
    });
  });
</script>



<div style="height: 200px;"></div>

<!-- whyamperion -->
{{ if .Params.whyamperion.enable }}
{{ partial "whyamperion.html" . }}
{{ end }}
<!-- /whyamperion -->





<!-- services -->
{{ with site.GetPage "/service" }}
{{ with .Params.service }}
<section id="service" class="service">
  <!-- container-fluid + my-container => um beides kombinieren zu können -->
  <div class="container-fluid my-container">
    <!-- Block mit Titel und Beschreibung -->
    <div class="services-title">
      {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
    </div>
    <div class="services-description">
      {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
    </div>
    <!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
    <div class="service-grid">
      {{ range first 3 .service_item }} <!-- Hier nur die ersten 3 Elemente nehmen -->
      <div class="service-item-fixed">
        <div class="zoom-wrap">
          <a href="{{ .link | relURL }}">
            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
            <div class="overlay-text">
              {{ .name }}
            </div>
            <div class="overlay"></div>
          </a>
        </div>
      </div>
      {{ end }}
    </div><!-- /service-grid -->
  </div><!-- /container-fluid.my-container -->
</section>
{{ end }}
{{ end }}
<!-- /services -->

<!-- focustopics -->
{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
{{ with .Params.service }}
<section id="service" class="service">
  <div class="container-fluid my-container">
    <div class="services-title">
      {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
    </div>
    <div class="services-description">
      {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
    </div>
    <div class="service-grid">
      {{ range first 3 .service_item }}
      <div class="service-item-fixed">
        <div class="zoom-wrap">
          <a href="{{ .link | relURL }}">
            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
            <div class="overlay-text">
              {{ .name }}
            </div>
            <div class="overlay"></div>
          </a>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /focustopics -->

<div style="height: 100px;"></div>

<!-- why amperion -->
{{ with site.GetPage "/why-amperion" }}
<section class="services-section">
  <h2 class="services-title">{{ .Params.service.title | default "OUR SERVICES" }}</h2>
  <h3 class="services-description">{{ .Params.service.description | default "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts." | markdownify }}</h3>
  <div class="services-grid">
    {{ range first 6 .Params.featured_service.service_item }}
    <div class="service-card">
      <img src="{{ .image | relURL }}" alt="{{ .name }}" class="service-icon">
      <h3 class="service-card-title">{{ .name }}</h3>
      <p class="service-card-description"><strong>{{ .content1 | markdownify }}</strong> {{ .content | markdownify }}</p>
    </div>
    {{ end }}
  </div>
</section>
{{ end }}

<!-- /why amperion -->

<div style="height: 100px;"></div>



{{ if .Params.contact.enable }}
{{ partial "cta.html" . }}
{{ end }}




<!-- about -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section">
  <div class="my-container">
    <div class="row">
      <div class="col-12 text-center">
        <div class="services-title">
          {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
        </div>
        <div class="services-description">
          {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 col-sm-12">
        <div class="text-left">
          {{ with .content }}{{ . | markdownify }}{{ end }}</div>
          <div class="hover-link"> 
          {{ with .link_text }}
            <a href="{{ "/about/" | relURL }}">{{ . }}</a>
          {{ end }}
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="block">
          <img src="{{ .image | relURL }}" class="custom-image" alt="Img">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /about -->


<div style="height: 100px;"></div>
<!-- call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /call to action -->
<div style="height: 100px;"></div>
<!-- facts -->
{{ with .Params.facts }}
{{ if .enable }}
<section class="facts">
  <div class="container">
    <div class="row">
      {{ range .fact_item }}
      <div class="col-md-6">
        <div class="fact-item text-center">
          <img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}


<style>
  .testimonial-item .images-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Bildern */
  }

  .testimonial-item .testimonial-image {
    width: 10px; /* Anpassen der Breite nach Bedarf */
    height: auto;
  }
</style>


<div style="height: 100px;"></div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrollDownButton = document.querySelector('.scroll-down-button');
    scrollDownButton.addEventListener('click', function() {
      document.querySelector('#about').scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
</script>
  
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrolled = false;
    var initialScrollListener = function() {
      if (!scrolled) {
        window.removeEventListener('scroll', initialScrollListener);
        document.getElementById('welcome').scrollIntoView({ behavior: 'smooth' });
        scrolled = true;
      }
    };

    window.addEventListener('scroll', initialScrollListener);
  });

  document.addEventListener("scroll", function() {
    var scrolldown = document.querySelector('.scrolldown');
    if (window.scrollY > 100) {  // Adjust this value based on when you want to hide the icon
      scrolldown.classList.add('hide');
    } else {
      scrolldown.classList.remove('hide');
    }
  });
</script>


{{ end }}