Dlaczego mój kod javascript nie działa?

pytanie zadane 28 marca 2019 w JavaScript przez Dylekter Użytkownik (670 p.)
zamknięte 29 marca 2019 przez Dylekter

Dzień dobry.

Pisałem sobie stronę i natknąłem się na problem. Mógłby ktoś powiedzieć dlaczego ten ko nie działa?

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("header").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("header").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

A tu załączam resztę:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JakubCywiński.com</title>
        <meta name="author" content="Jakub Cywińsk">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Programista web developer. Strony internetowe.">
        <meta name="keywords" content="Jakub, Web, developer, Jakub Cywiński, Strony, internetowe,">
        <meta http-equiv="X-UA-Compstible" content="IE=edge,chrome=1">
        <link rel="shortcut icon" href="png/shortcutIcon.png">
        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Concert+One|Fjalla+One|Lobster|Merienda|Source+Code+Pro|VT323" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
      
      <header>
        <p id="logo">----------------</p>
        <div id="right">
          <a class="active" href="#">Home</a>
          <a href="#">Contact</a>
          <a href="#">About</a>
        </div>
      </header>
      <main style="height: 2000px;">

      </main>

      <script type="text/javascript">
        AOS.init();
      </script>
    </body>

</html>

oraz css:

* { text-align:center; box-sizing: border-box;}

/* font-family: 'Fjalla One', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Source Code Pro', monospace;
font-family: 'Concert One', cursive;
font-family: 'Merienda', cursive;
font-family: 'VT323', monospace; */

html{
    margin: 0;
    background: #1e272e;
    background-attachment: fixed;
    
}

body{
    margin: 0;
}

header {
    overflow: hidden;
    padding: 90px 10px;
    transition: 0.4s;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99;
    background-color: #ec392f;
    box-shadow: 0px 3px 5px #171718;
}

header #logo  {
  color: black;
  text-align: center;
  padding: 12px;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  font-size: 35px;
  margin: 0;
  font-weight: bold;
  transition: 0.4s;
  float: left;
}

#right{
    float: right;
}

#right a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px; 
    line-height: 25px;
    border-radius: 4px;
  }

Z góry dziękuję za pomoc :)

komentarz zamknięcia: Problem Rozwiązany