How to prevent other animations from playing?

  css, html, javascript, jquery

So I have two animations, one from menu toggle and one from sticky navbar’s if statement. Whenever I toggle the menu on, and then started scrolling, the animation from sticky navbar’s if statement will start playing. How do I prevent this from happening?

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

var navbar = document.getElementById("navbar-container");

var navContent = document.getElementById("navbar-content");

var nav_h1 = document.getElementById("title").style;

var navMain = document.getElementById("nav").style;
var navMenu = document.getElementById("nav-menu").style;

var menuIcon = document.getElementById("menuIcon").style;
var menuIconContainer = document.getElementById("menuIconContainer").style;
var menuIconOpen = document.getElementsByClassName("menuIconOpen")[0];
var menuIconClose = document.getElementsByClassName("menuIconClose")[0];

var checkbox = document.getElementById("menuCheckBox");
var checkboxName = document.getElementsByName("menuCheckBoxName")[0];
var checkboxLabel = document.getElementById("menuIcon");

var sticky = navbar.offsetTop;

 /*
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                        STICKY NAVBAR
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */
function stickynavbar() {
    if (window.pageYOffset >= sticky) {
        navbar.style.position = "fixed";
        navbar.style.top = "0";
        navbar.style.marginTop = "0";

        navContent.style.animationName = "shrink-content";
        navContent.style.animationDuration = "var(--shrinkDuration, 500ms)";
        navContent.style.animationTimingFunction = "var(--shrinkTimingFunction, linear)";
        navContent.style.animationFillMode = "var(--shrinkFillMode, forwards)";

        nav_h1.animationName = "shrink-h1";
        nav_h1.animationDuration = "var(--shrinkDuration, 500ms)";
        nav_h1.animationTimingFunction = "var(--shrinkTimingFunction, linear)";
        nav_h1.animationFillMode = "var(--shrinkFillMode, forwards)";

        /*
                ________________________________________________________________________________

                                                MEDIA QUERY
                ________________________________________________________________________________
                */

        let desktop = window.matchMedia("(min-width: 768px)");
        let tablet = window.matchMedia("(min-width: 600px)");

            /*
                ________________________________________

                        MENU CONTAINER AND ICON
                ________________________________________
                */ 
        function menuIconMQuery(desktop) {
            if (desktop.matches) {
                menuIcon.animation = "menuIconDesktopShow 500ms linear";
                menuIcon.animationFillMode = "forwards";
                menuIcon.display = "block";
                menuIcon.top = "0";
                menuIcon.bottom = "auto";
                menuIcon.left = "auto";
                menuIcon.right = "0";

                menuIconContainer.display = "none";

            } else {
                menuIcon.animation = "menuIconMobileShow 500ms linear";
                menuIcon.animationFillMode = "forwards";
                menuIcon.display = "block";
                menuIcon.top = "auto";
                menuIcon.bottom = "0";
                menuIcon.left = "0";
                menuIcon.right = "0";

                menuIconContainer.animation = "menuIconContainerMobileShow 500ms linear";
                menuIconContainer.animationFillMode = "forwards";
                menuIconContainer.display = "block";
            }
        }
        
        menuIconMQuery(desktop);
        desktop.addListener(menuIconMQuery);

        /*
                ________________________________________

                                Nav Main
                ________________________________________
                */
        if(checkbox.checked == true){
            navMain.display = "block";
        }
        else{
            navMain.display = "none";
        }
        function navMainMQuery(){
            if (desktop.matches){
                navMain.animation = "reposition-desktop 500ms ease-out";
                navMain.animationFillMode = "forwards";
            }
            else if (tablet.matches){
                navMain.animation = "reposition-tablet 500ms ease-out";
                navMain.animationFillMode = "forwards";
            }
            else{
                navMain.animation = "reposition-mobile 500ms ease-out";
                navMain.animationFillMode = "forwards";
            }
        }
        navMainMQuery();
        desktop.addEventListener("change", navMainMQuery);
        tablet.addEventListener("change", navMainMQuery);
    } 
    /*
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        ELSE
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */
    else {
        navbar.style.position = "absolute";
        navbar.style.top = "50vh";
        navbar.style.marginTop = "calc(-1em - 1vh)";

        navContent.style.animationName = "grow-content";
        navContent.style.animationDuration = "var(--growDuration, 500ms)";
        navContent.style.animationTimingFunction = "var(--growTimingFunction, linear)";
        navContent.style.animationFillMode = "var(--growFillMode, forwards)";

        nav_h1.animationName = "grow-h1";
        nav_h1.animationDuration = "var(--growDuration, 500ms)";
        nav_h1.animationTimingFunction = "var(--growTimingFunction, linear)";
        nav_h1.animationFillMode = "var(--growFillMode, forwards)";

        /*
                ________________________________________________________________________________

                                                MATCH MEDIA
                ________________________________________________________________________________
                */

        let desktop = window.matchMedia("(min-width: 768px)");
        let tablet = window.matchMedia("(min-width: 600px)");

            /*
                ________________________________________

                        MENU CONTAINER AND ICON
                ________________________________________
                */ 
        function menuIconMQuery(desktop) {
            if (desktop.matches) {
                menuIcon.animation = "menuIconDesktopHide 500ms linear";
                menuIcon.animationFillMode = "forwards";
                menuIcon.display = "block";
                menuIcon.top = "0";
                menuIcon.bottom = "auto";
                menuIcon.left = "auto";
                menuIcon.right = "0";

                menuIconContainer.display = "none";

            } else {
                menuIcon.animation = "menuIconMobileHide 500ms linear";
                menuIcon.animationFillMode = "forwards";
                menuIcon.display = "block";
                menuIcon.top = "auto";
                menuIcon.bottom = "0";
                menuIcon.left = "0";
                menuIcon.right = "0";

                menuIconContainer.animation = "menuIconContainerMobileHide 500ms linear";
                menuIconContainer.animationFillMode = "forwards";
                menuIconContainer.display = "block";
            }
        }
        
        menuIconMQuery(desktop);
        desktop.addListener(menuIconMQuery);

        /*
                ________________________________________

                                Nav Main
                ________________________________________
                */
        if(checkbox.checked == true){
            navMain.display = "block";
        }
        else{
            navMain.display = "none";
        }
        function navMainMQuery(){
            if (desktop.matches){
                navMain.animation = "reposition-desktop-hide 500ms ease-out";
                navMain.animationFillMode = "forwards";
            }
            else if (tablet.matches){
                navMain.animation = "reposition-tablet-hide 500ms ease-out";
                navMain.animationFillMode = "forwards";
            }
            else{
                navMain.animation = "reposition-mobile-hide 500ms ease-out";
                navMain.animationFillMode = "forwards";
            }
        }
        navMainMQuery();
        desktop.addEventListener("change", navMainMQuery);
        tablet.addEventListener("change", navMainMQuery);
    }
}
    /*
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                        MENU TOGGLE
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */
let desktop = window.matchMedia("(min-width: 768px)");
let tablet = window.matchMedia("(min-width: 600px)");

function navMainMQuery() {
    stickynavbar();
    if(desktop.matches){
        checkbox.addEventListener("change", function() {menuToggle();});
        function menuToggle() {
                if (checkbox.checked == true) {
                    
                    navMain.animation = "menuToggleOnDesktop 500ms linear";
                    navMain.animationFillMode = "forwards";
                    navMain.display = "block";
                } 
                else{ 

                    navMain.animation = "menuToggleOffDesktop 500ms linear";
                    navMain.animationFillMode = "forwards";
                    navMain.display = "block";
                }
        }
    }
    else if(tablet.matches){
        checkbox.addEventListener("change", function() {menuToggle();});
        function menuToggle() {
                if (checkbox.checked == true) {
                    
                    navMain.animation = "menuToggleOnTablet 500ms linear";
                    navMain.animationFillMode = "forwards";
                    navMain.display = "block";
                } 
                else{ 

                    navMain.animation = "menuToggleOffTablet 500ms linear";
                    navMain.animationFillMode = "forwards";
                    navMain.display = "block";
                }
            navMain.position = "fixed";
            navMain.top = "auto";
            navMain.bottom = "30vh";
        }
    }
    else{
        checkbox.addEventListener("change", function() {menuToggle();});
        function menuToggle() {
                if (checkbox.checked == true) {
                    
                    navMain.animation = "menuToggleOn 500ms linear";
                    navMain.animationFillMode = "forwards";
                    navMain.display = "block";
                } 
                else{ 

                    navMain.animation = "menuToggleOff 500ms linear";
                    navMain.animationFillMode = "forwards";
                    navMain.display = "block";
                }
            navMain.position = "fixed";
            navMain.top = "auto";
            navMain.bottom = "10vh";
        }
    }
}   
navMainMQuery();
desktop.addEventListener("change", navMainMQuery);
tablet.addEventListener("change", navMainMQuery);
:root {
  overflow-x: auto;
  --shrinkDuration: 500ms;
  --shrinkTimingFunction: linear;
  --shrinkFillMode: forwards;

  --growDuration: 500ms;
  --growTimingFunction: linear;
  --growFillMode: forwards;
}
body {
  position: relative;
  display: grid;
  grid-template-rows: 100vh auto auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  margin: 0 auto;
}

header {
  position: relative;
  grid-area: header;
  background: url("https://fanart.tv/fanart/music/1079b087-a5b3-4a07-abbc-88043ceda334/albumcover/a-place-where-the-sun-is-silent-51a5cd69d31d5.jpg");
  background-size: cover;
  display: grid;
  z-index: 1;
}
#header-frontground {
  background: rgb(0, 0, 0, 0.8);
  background-size: 100%;
  z-index: 2;
}

#navbar-container {
  position: absolute;
  top: 50vh;
  left: 0;
  right: 0;

  margin-top: calc(-1em - 1vw);
  padding: 0;
  width: 100%;

  background: lightskyblue;
}
#navbar-content {
  position: relative;
  background: darkred;
  width: 100%;
  height: auto;

  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-template-areas:
    "nav-h1"
    "nav-menu-icon"
    "nav";
  grid-column-gap: 100px;
  margin: 0;
}

@media (min-width: 768px) {
  #navbar-content {
    display: grid;
    grid-template-areas:
      "nav-h1"
      "nav";
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    grid-column-gap: 0;
  }
}

#navbar-content #title {
  font-family: "NemoyBold", cursive;
  font-weight: bold;
  font-style: normal;
  font-size: var(--navContentH1Size, calc(2em + 2vw));
  text-transform: uppercase;

  margin: 0 auto;
  text-align: center;
  grid-area: nav-h1;

  color: white;
  background: rgb(255, 0, 0, 0.4);
}
@keyframes shrink-h1 {
  0% {
    font-size: calc(2em + 2vw);
  }
  100% {
    font-size: calc(1.5em + 0.75vw);
  }
}
@keyframes grow-h1 {
  0% {
    font-size: calc(1.5em + 0.75vw);
  }
  100% {
    font-size: calc(2em + 2vw);
  }
}
.menuIconContainer {
  display: none;

  position: fixed;
  top: auto;
  bottom: -45px;
  left: 50vw;
  margin-left: -100px;

  width: 200px;
  height: 80px;

  border-radius: 50%;

  background: darkred;
}
@keyframes menuIconContainerMobileShow {
  from {
    width: 100%;
    border-radius: 0;
    opacity: 0;
    left: 0;
    margin-left: 0;
  }
  top {
    width: 200px;
    border-radius: 50%;
    opacity: 1;
    left: 50vw;
    margin-left: -100px;
  }
}
@keyframes menuIconContainerMobileHide {
  from {
    width: 200px;
    border-radius: 50%;
    opacity: 1;
    left: 50vw;
    margin-left: -100px;
  }
  to {
    width: 100%;
    border-radius: 0;
    opacity: 0;
    display: none;
    left: 0;
    margin-left: 0;
  }
}
#menuIcon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  display: none;

  width: calc(1.5em + 0.75vw);
  height: calc(1.5em + 0.75vw);

  text-align: center;
  font-size: 30px;
  font-weight: bold;
  background: palegreen;
  border-radius: 50%;

  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@keyframes menuIconMobileShow {
  from {
    opacity: 0;
    transform: rotate(0deg);
    border-radius: 0;
  }
  to {
    opacity: 1;
    transform: rotate(720deg);
    border-radius: 50%;
  }
}
@keyframes menuIconMobileHide {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    border-radius: 50%;
  }
  100% {
    opacity: 0;
    transform: rotate(720deg);
    border-radius: 0;
    display: none;
  }
}
@keyframes menuIconDesktopShow {
  from {
    opacity: 0;
    transform: rotate(0deg);
    border-radius: 50%;
  }
  to {
    opacity: 1;
    transform: rotate(720deg);
    border-radius: 0;
    width: calc(1.425em + 0.7125vw);
    height: calc(1.425em + 0.7125vw);
  }
}
@keyframes menuIconDesktopHide {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    border-radius: 0;
  }
  100% {
    opacity: 0;
    transform: rotate(720deg);
    border-radius: 50%;
    display: none;
  }
}

#menuCheckBox {
  display: none;
}

.menuIconOpen {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}
.menuIconClose {
  position: absolute;
  left: 0;
  right: 0;
  top: 0; 
  bottom: 0;
  margin: 0 auto;
}

#menuCheckBox:checked ~ #menuIcon .menuIconOpen {
  animation: menuOpenIconHide 500ms linear;
  animation-fill-mode: forwards;
}
#menuCheckBox:not(:checked) ~ #menuIcon .menuIconOpen {
  animation: menuOpenIconShow 500ms linear;
  animation-fill-mode: forwards;
}
@keyframes menuOpenIconShow {
  from {
    display: block;
    transform: rotate(0deg);
    opacity: 0;
  }
  to {
    display: block;
    transform: rotate(180deg);
    opacity: 1;
  }
}
@keyframes menuOpenIconHide {
  from {
    display: block;
    transform: rotate(0deg);
    opacity: 0.3;
  }
  to {
    display: none;
    transform: rotate(180deg);
    opacity: 0;
  }
}
#menuCheckBox:checked ~ #menuIcon .menuIconClose {
  animation: menuCloseIconShow 500ms linear;
  animation-fill-mode: forwards;
}
#menuCheckBox:not(:checked) ~ #menuIcon .menuIconClose {
  animation: menuCloseIconHide 500ms linear;
  animation-fill-mode: forwards;
}
@keyframes menuCloseIconShow {
  from {
    display: block;
    transform: rotate(0deg);
    opacity: 0;
  }
  to {
    display: block;
    transform: rotate(-180deg);
    opacity: 1;
  }
}
@keyframes menuCloseIconHide {
  from {
    display: block;
    transform: rotate(0deg);
    opacity: 0.3;
  }
  to {
    display: none;
    transform: rotate(-180deg);
    opacity: 0;
  }
}
#nav {
  position: fixed;
  top: auto;
  bottom: 10vh;
  left: 0;
  right: 0;
  display: none;

  margin: 0 auto;
  padding: 0;

  width: 100%;
  height: auto;

  background: rgb(0, 255, 255, 0.4);
}
@keyframes reposition-mobile {
  from {
    position: fixed;
    top: auto;
    bottom: 100vh;
    opacity: 0;
  }
  to {
    top: auto;
    bottom: 10vh;
    opacity: 1;
  }
}
@keyframes reposition-mobile-hide {
  from {
    position: fixed;
    top: auto;
    bottom: 10vh;
    opacity: 1;
  }
  to {
    position: fixed;
    top: auto;
    bottom: 100vh;
    opacity: 0;
    display: none;
  }
}
@keyframes reposition-tablet {
  from {
    position: fixed;
    top: auto;
    bottom: 100vh;
    opacity: 0;
  }
  to {
    position: fixed;
    top: auto;
    bottom: 30vh;
    opacity: 1;
  }
}
@keyframes reposition-tablet-hide {
  from {
    position: fixed;
    top: auto;
    bottom: 30vh;
    opacity: 1;
  }
  to {
    position: fixed;
    top: auto;
    bottom: 100vh;
    opacity: 0;
    display: none;
  }
}
@keyframes reposition-desktop {
  0% {
    position: fixed;
    top: 100vh;
    bottom: auto;
    opacity: 0;
  }
  99% {
    position: fixed;
    top: calc(2.55em + 1.275vw);
    bottom: auto;
  }
  100% {
    position: static;
    top: 0;
    bottom: 0;
    opacity: 1;
  }
}
@keyframes reposition-desktop-hide {
  0% {
    position: static;
    bottom: 0;
    opacity: 1;
  }
  1% {
    position: fixed;
    top: calc(2.55em + 1.275vw);
    bottom: auto;
  }
  100% {
    position: fixed;
    top: 100vh;
    bottom: auto;
    opacity: 0;
    display: none;
  }
}

@keyframes menuToggleOn {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes menuToggleOff {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100vh);
  }
}
@keyframes menuToggleOnTablet {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes menuToggleOffTablet {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100vh);
  }
}
@keyframes menuToggleOnDesktop {
  0% {
    transform: translateY(-10vh);
    position: fixed;
    top: 0;
    bottom: auto;
  }
  99% {
    transform: translateY(50px);
    position: fixed;
    top: 0;
    bottom: auto;
  }
  100% {
    transform: translateY(0);
    position: static;
    top: auto;
    bottom: auto;
  }
}
@keyframes menuToggleOffDesktop {
  0% {
    transform: translateY(0);
    position: static;
    top: auto;
    bottom: auto;
  }
  1% {
    transform: translateY(50px);
    position: fixed;
    top: 0;
    bottom: auto;
  }
  100% {
    transform: translateY(-10vh);
    position: fixed;
    top: 0;
    bottom: auto;
  }
}
#nav-content {
  background: darkblue;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 0;
}
#nav-menu {
  grid-area: nav;

  display: flex;

  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;

  background: rgb(0, 255, 0, 0.4);

  width: 100%;
  height: auto;

  padding: 0;
  margin: 0 auto;
  text-align: center;

  position: static;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
@media (min-width: 600px) {
  #nav-menu {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media (min-width: 768px) {
  #nav-menu {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}
#nav-menu {
  margin: 0;
  padding: 0;
}
#nav-menu a {
  list-style-type: none;
  width: 100%;
  height: auto;
  text-decoration: none;
}
#nav-menu a li {
  color: white;
  font-family: "DesignosaurRegular", cursive;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  padding: 10px;
}
#nav-menu a:nth-child(1) {
  background: darkgoldenrod;
}
#nav-menu a:nth-child(2) {
  background: DarkBlue;
}
#nav-menu a:nth-child(3) {
  background: DarkGreen;
}
#nav-menu a:nth-child(4) {
  background: OrangeRed;
}
@media (min-width: 600px) {
  #nav-menu a {
    width: 50%;
    padding: 0;
  }
}
@media (min-width: 768px) {
  #nav-menu a {
    width: 25%;
    padding: 0;
  }
}

main {
  background: LightSkyBlue;
  grid-area: main;
  text-align: center;
  font-family: "Train One", cursive;

  display: grid;
  grid-template-rows: auto 100vh 100vh 100vh 100vh;
  grid-template-areas:
    "main-title"
    "article-1"
    "article-2"
    "article-3"
    "article-4";
}

.main-title {
  grid-area: main-title;
  background: LightGreen;
}
.article-1 {
  grid-area: article-1;
  background: LightSalmon;
  text-align: center;
}
.article-1 h3 {
  margin-top: 10vh;
}
.article-2 {
  grid-area: article-2;
  background: DarkSalmon;
  text-align: center;
}
.article-2 h3 {
  margin-top: 10vh;
}
.article-3 {
  grid-area: article-3;
  background: Salmon;
  text-align: center;
}
.article-3 h3 {
  margin-top: 10vh;
}
.article-4 {
  grid-area: article-4;
  background: saddlebrown;
  text-align: center;
}
.article-4 h3 {
  margin-top: 10vh;
}
@media (min-width: 768px) {
  .article-1 h3,
  .article-2 h3,
  .article-3 h3,
  .article-4 h3 {
    margin-top: 15vh;
  }
}
footer {
  background: PaleTurquoise;
  grid-area: footer;
  text-align: center;
  font-family: "Train One", cursive;
}
footer h2 {
  margin-bottom: 10vh;
}
@keyframes hideMenu {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes displayMenu {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Train+One&display=swap" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/nemoy" type="text/css" />

    <link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/designosaur" type="text/css" />

    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Alesana Tribute Page</title>
</head>

<body>
    <header>
        <div id="header-frontground">
            <div id="navbar-container">
                <div id="navbar-content">
                    <h1 id="title">alesana</h1>
                    <span class="menuIconContainer" id="menuIconContainer"></span>
                    <input id="menuCheckBox" type="checkbox" name="menuCheckBoxName"/>
                    <label for="menuCheckBox" id="menuIcon" tabindex="1">
                        <span class="menuIconOpen">
                            ☰
                        </span>
                        <span class="menuIconClose">
                            ✖
                        </span>
                    </label>
                    <nav id="nav">
                        <div id="nav-content">
                            <ul id="nav-menu">
                                <a href="#article-1" tabindex="2">
                                    <li>
                                        Section 1
                                    </li>
                                </a>
                                <a href="#article-2" tabindex="3">
                                    <li>
                                        Section 2
                                    </li>
                                </a>
                                <a href="#article-3" tabindex="4">
                                    <li>
                                        Section 3
                                    </li>
                                </a>
                                <a href="#article-4" tabindex="5">
                                    <li>
                                        Section 4
                                    </li>
                                </a>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <main id="main">
        <h2 class="main-title" id="main-title">Main</h2>
        <section class="article-1" id="article-1">
            <h3>Article 1</h3>
        </section>
        <section class="article-2" id="article-2">
            <h3>Article 2</h3>
        </section>
        <section class="article-3" id="article-3">
            <h3>Article 3</h3>
        </section>
        <section class="article-4" id="article-4">
            <h3>Article 4</h3>
        </section>
    </main>
    <footer>
        <h2>Footer</h2>
    </footer>
    <script src="script.js"></script>
</body>

</html>

Source: Ask Javascript Questions

LEAVE A COMMENT