JSFiddle - React, Tailwind, and code Playground

by RXBeat

HTML

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <base target="_top">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
		
</head>

<body>

<header class="header-navigation" id="header">
  <nav>
    <ul>
      <li>
        <a class="link" href="part_1" title="Seite1">Seite1</a>
        <a class="link" href="part_2" title="Seite2">Seite2</a>
      </li>
    </ul>
  </nav>
</header>


<main>
  <section id="part_1">
    <div>
      <h1>1111</h1>
      <p>Erläuterungen und Hinweise zu HTML5</p>
    </div>
  </section>

  <section id="part_2">
    <div>
      <h1>2222</h1>
      <p>Erläuterungen und Hinweise zu HTML5</p>
    </div>
  </section>
</main>


</body>
</html>

CSS

html, * {
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Google Sans', Roboto, sans-serif;
  min-height: 100%; 
  text-align: center;
}

body {
  min-height: 100%;
  background-color: #555;
}

.header-navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #333;
  text-align: center;
  font-size: 0.8em;
}

.link {
  color: #fff;
  text-decoration: none;
  margin: 0 13px;
}

h1 {
  font-size: 1.5em;
  text-align: center;
  margin-top: 2.0em;
  margin-bottom:1em;
  color: #fff;
}

p {
  text-align: center;
  color: #fff;
  font-size: 1.0em;
}

/* Slide transitions */

.slideUp {
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  transition: transform .5s ease-out;
}

.slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform .5s ease-out;
}

JavaScript

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");

window.addEventListener('scroll', function(e) {
  last_scroll_position = window.scrollY;

  // Scrolling down
  if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
    // header.removeClass('slideDown').addClass('slideUp');
    header.classList.remove("slideDown");
    header.classList.add("slideUp");

  // Scrolling up
  } else if (new_scroll_position > last_scroll_position) {
    // header.removeClass('slideUp').addClass('slideDown');
    header.classList.remove("slideUp");
    header.classList.add("slideDown");
  }

  new_scroll_position = last_scroll_position;
});