Probleme Menu sticky

Bonjour,

Etant débutant en javascript, je dois créer un portfolio et j'ai eu comme idée de mettre ma barre de navigation en bas et lorsque je parcours mon site la barre de navigation remonte en haut.
J'ai une fonction qui permet que ma barre de navigation s'adapte a l'ecran mais ma deuxieme fonction qui scroll ne fonctionne pas. Je vous montre le code.

Merci d'avance pour votre aide.

Voici ma page d'accueil (Site one page)


Ma page index

<div class="bgimg-1">
  <div class="caption">
      <!-- Nom et prenom -->
  <span class="border">Chris Dimoke GHENDA
      Etudiant DUT Informatique
  </span>

<!-- Barre de navigation -->
<div class="topnav" id="myTopnav">
    <div id="navscoll">
  <a href="#home">Accueil</a>
  <a href="#news">A propos</a>
  <a href="#contact">Compétences</a>
  <a href="#about">Experiences</a>
  <a href="#about">Portfolio</a>
  <a href="#about">Hobbies</a>
  <a href="#about">Contact</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
</div>

  </div>
</div>

Ma page en CSS ( Tout n'est pas encore commenté)

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

/* Position des images */
.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bgimg-1 {
  background-image: url("images/bart.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("img_parallax2.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("img_parallax3.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}


.caption span.border {
  border: double #000000;
  color: #000000;
  padding: 30px;
  font-size: 30px;
  letter-spacing: 5px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
  text-align:center;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}
/* Barre de navigation */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width:100%;
  text-align:center;
  z-index:2;
}

.topnav a {
  float: none;
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Pour le bloc a propos*/
.apropos{
    color: #777;
    background-color:white;
    text-align:center;
    padding:50px 80px;
    text-align: justify;
    z-index:1;
}

/* Pour le bloc competences*/
.competences{
    color: #777;
    background-color:white;
    text-align:center;
    padding:50px 80px;
    text-align: justify;
    z-index:1;
}



.sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f4511e;
}

Et mon fichier JS

/* Fonction pour que la barre de navigation s'adapte a l'ecran */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/* fonction permettant que la barre de navigation reste fixed lorsque
on parcourt la page*/
window.onscroll = function() {functionscroll()};

var navscoll = document.getElementById("navscoll");
var sticky = navscoll.offsetTop;

function functionscroll() {
  if (window.pageYOffset >= sticky) {
    navscoll.classList.add("sticky")
  } else {
    navscoll.classList.remove("sticky");
  }
}