Optik Tack v.2

by HcJanni

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>OptikTack</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="container">
      <!-- Für die Animaton am Anfang vom Laden der Seite -->
      <div class="loader">
      
      </div>
      <div class="wrapper">
        <!-- NAVIGATION -->
        <nav id="navbar">
          <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
          <script src="javascript/navbar fixed.js"></script>
          <a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png" class="logo"></a>
          <ul>
            <li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>
            <li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>
            <li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>
            <li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>
            <li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>
          </ul>
        </nav>
        <!-- NAVIGATION ENDE -->
        <!-- MAIN -->
        <div id="spacer"></div>
        <!-- home section -->
        <section id="home" class="section sectionhome">
          <div>
            <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
          </div>
        </section>
        <!-- home section ende -->
        <!-- wir-ueber-uns section -->
        <section id="wir-ueber-uns" class="section sectionwir-ueber-uns">
          <div>
            <img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px"...

CSS

@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Armata&family=Changa:wght@200;300;400;500;600;700;800&family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Goldman:wght@400;700&family=Play:wght@400;700&family=Rajdhani:wght@300;400;500;600;700&family=Saira:wght@100;200;300;400;500;600;700;800;900&family=Sunflower:wght@300;500;700&family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

/* CSS Document */

/*font-family: 'Armata', sans-serif;
font-family: 'Changa', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Goldman', cursive;
font-family: 'Play', sans-serif;
font-family: 'Rajdhani', sans-serif;
font-family: 'Saira', sans-serif;
font-family: 'Sunflower', sans-serif;
font-family: 'Tomorrow', sans-serif;*/

/* ALLGEMEINES */
* {
  font-family: "Saira", "Roboto", Segoe UI, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
}

#container {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: hidden;
}

body {
  background-color: #d0d0d0;
  margin: 128px 0 0 0;
  /*background-image: url("https://i.postimg.cc/9M2xQYcm/Hintergrund.png")*/
}





/* NAVIGATION */
#navlinks {
  margin: 0;
}

ul {
  color: black;
  list-style: none;
  float: right;
  margin-right: 1rem;
  padding-top: 2.25%;
}

ul li {
  display: inline-table;
  margin-left: 0.25rem;
  padding: 0.25rem;
  border-bottom: 1.5px solid;
  border-bottom-color: white;
}

ul li a {
  color: black;
  text-decoration: none;
  padding: 0.6rem;
}

/*
ul li a:hover {
  color: white;
  transition: 0.4s;
  text-decoration: none;
}*/

#logo {
  margin-left: 1rem;
}

.logo:hover {
  opacity: 0.5;
  transition: 0.3s;
}

/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
  position: fixed;
  top:...

JavaScript

// SHRINKING HEADER EFFEKT beim scrollen von https://codepen.io/tomdurkin/pen/nvAjd

$(function() {
  var shrinkHeader = 100;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      $('#navbar').addClass('shrink');
    } else {
      $('#navbar').removeClass('shrink');
    }
  });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});


// SMART NAVBAR / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section, leicht verändert/angepasst

$(document).ready(function() {

  var navTop = $('#navbar').offset().top;
  var navHeight = $('#navbar').height();
  var windowH = $(window).height();

  $('.section').height(windowH);

  $(document).scroll(function() {
    var st = $(this).scrollTop(); // überwacht wie weit man scrollt

    if (window.scrollY <= 50) { // behebt kleinen Fehler beim ersten scrollen
      element.classList.add("active");
    }

    $('.section').each(function(index, element) {
      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
        $(this).addClass('active');

        var id = $(this).attr('id');
        $('a[href="#' + id + '"]').parent('li').addClass('active');
        // or $('#nav li:eq('+index+')').addClass('active');
      } else {
        $(this).removeClass('active');

        var id = $(this).attr('id');
        $('a[href="#' + id + '"]').parent('li').removeClass('active');
        //or $('#nav li:eq('+index+')').removeClass('active');
      }

    });

  });

});


// ANIMATION am Anfang vom Laden der Seite
$(window).on("load", function() {
  $(".loader").animate({opacity: "0"});
});


// SMOOTH SCROLL
$('a').click(function() {
  var scrollziel = $(this).attr('href');
  if (scrollziel == '#home') {
    $('html, body').animate({
      scrollTop: 0
    }, 750); // Geschwindigkeit beim hochscrollen
   ...