JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<!DOCTYPE html>
<html>
  <link href="main.css" type="text/css" rel="stylesheet" />
  <!-- Google fonts beneath -->
  <link href="https://fonts.googleapis.com/css?family=Arima+Madurai:300|Lato:300|Open+Sans:300|Quicksand|Raleway" rel="stylesheet">

  <head>
    <title> Big Oof </title>


  </head>

  <body>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="js\maincontent.js"></script>
    <script src='js\main.js'></script>
    <div class="menu">
      <ul>
        <li id="active"><a>Home</a></li>
        <li><a href="politics.html">Articles</a></li>
        <li><a href="members.html">Members</a></li>
        <li><a href="discussions.html">Discussions</a></li>
        <li><a href="contact.html">Contact</a></li>

      </ul>
    </div>



    <div class="header-image">
      <div class="titlecontainer">
        <div class="header-title">
          <h1> Anarchists and Autocrats </h1>
        </div>
      </div>
    </div>

    <div class="contentwrapper">
      <div class="content">


        <div id="firstpoint">
          <p>Anarchists and Autocrats is a webzine/blog which was founded in 2018. Since then, Anarchists and Autocrats has become host to over twenty authors, artists and thinkers who write about current events, philosophy, politics, culture and many other
            topics.
          </p>
        </div>





        <div id="secondpoint">
          <p> While all authors try to produce well-balanced views within articles and essays written, it goes without needing to be said that each author has their own biasses that will find themselves within each article, whether that's in the language
            used or even the subject matter. Anarchists and Autocrats aims to bring about different and far-reaching opinions, but it is impossible to present a fully diverse and differing set of viewpoints for which we can present: finding an anarcho-syndicalist,
            a monarchist, a paleo-conservative and a social democrat...

CSS

html,
body {
  margin: 0px;
}

body {
  font-family: Futura, sans-serif;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}

@font-face {
  font-family: SourceSansPro-Regular;
  src: url('fonts/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: SourceSansPro-Light src: url('fonts/SourceSansPro-Light.ttf');
}

@font-face {
  font-family: NexaLight;
  src: url('fonts/Nexa-Light.otf');
}

html,
body {
  overflow-x: hidden;
}

.menu {
  width: 100%;
  background-color: #ffffff;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  font-family: NexaLight;
  text-align: center;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.35);
}

.menu ul {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
  line-height: 100px;
}

.menu li {
  padding-left: 40px;
  padding-right: 40px;
  display: inline;
  text-decoration: none;
  list-style: none;
  vertical-align: middle;
}

.menu li a {
  text-decoration: none;
  list-style: none;
  color: #333333;
  text-shadow: 2px 2px rgb(112, 112, 112, 0.3);
}

.menu li a:hover {
  color: #4769b2;
  text-shadow: 2px 2px rgb(108, 138, 204, 0.3);
}

#active {
  font-weight: bold;
}

/* Fonts!!!
font-family: 'Raleway', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Arima Madurai', cursive;


*/

.header-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.titlecontainer {
  width: 100%;
  position: fixed;
  z-index: 0;
}

.header-title h1 {
  color: white;
  text-shadow: 2px 2px 4px #d1d1d1;
  font-family: 'NexaLight';
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
}

.header-image {
  background: url("http://www.freeimageslive.com/galleries/buildings/london/pics/palace_of_westminster.jpg") bottom/ cover;
  width: 100%;
  height: 65vh;
  background-size: cover;
 ...

JavaScript

$(document).ready(function() {
  $(window).scroll(function(event) {
    let scroll = $(this).scrollTop();
    let opacity = 1 - (scroll / 200);
    if (opacity >= 0) {
      $('.header-title').css('opacity', opacity);
      if (scroll / 200 >= 0.9) {
        $('.header-title').hide();
      } else {
        $('.header-title').show();
      }
    }
  });
});