$(document).ready(function() {
  // Custom
  // function which toggles between sticky class(is - sticky)
  var stickyToggle = function(sticky, stickyWrapper, scrollElement) {
    var stickyHeight = sticky.outerHeight();
    var stickyTop = stickyWrapper.offset().top;
    if (scrollElement.scrollTop() >= stickyTop) {
      stickyWrapper.height(stickyHeight);
      sticky.addClass("is-sticky");
    } else {
      sticky.removeClass("is-sticky");
      stickyWrapper.height('auto');
    }
  };

  // Get the navbar
  var navbar = document.getElementById("navbar");

  // Get the offset position of the navbar
  var sticky = navbar.offsetTop;

  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky")
    } else {
      navbar.classList.remove("sticky");
    }
  }

  $('.SeeMore').click(function() {
    var $this = $(this);
    // $this.toggleClass('SeeMore2');
    if ($this.hasClass('.SeeMore')) {
      console.log("aaa");
      $this.removeClass('.SeeMore')
      $this.addClass('.SeeMore2')
      $this.text('READ MORE');
    } else {
      console.log("bbb");
      $this.removeClass('.SeeMore2')
      $this.addClass('.SeeMore')
      $this.text('READ LESS');
    }
  });

  $('[data-toggle="sticky-onscroll"]').each(function() {
    var sticky = $(this);
    var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
    sticky.before(stickyWrapper);
    sticky.addClass('sticky');

    // Scroll & resize events
    $(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function() {
      stickyToggle(sticky, stickyWrapper, $(this));
    });

    // On page load
    stickyToggle(sticky, stickyWrapper, $(window));
  });
});

.container-fluid{
   padding: 0 0px !important;
}

.logo{
  /* padding-left: 130px; */
  margin-left: 50px;
}

.borderme {
  padding:0px;
  spacing: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

#about{
  /* position:relative; */
  position:absolute; top:-150px;
}

#archive{
  position:relative; top:-0px;
}

.navs{
  font-size: 25px;
  padding-left: 9%;
  padding-right: 11%;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
}

body {
  min-height: 1200px;
}

nav {
  background: #fff;
  min-height: 85px;
}

.home {
    width: 1280px;
    height: 20px;
    background-color: aqua;
}

/* .sticky {
    position: fixed;
    top: 0;
    width: 100%
} */
/* Style the navbar */
.seeds{
  color: white;
  text-align: right;
}

#navbar {
  border: 2px solid pink;
  width:100%;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 0px;
  border-bottom: 1px solid black;
}

/* Navbar links */

#navbar a {
    display: inline;
    color: black;
    text-align: right;
    text-decoration: none;
    /* height: 30px; */
}

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    /* height: 200px; */
}

#countup p {
    display: inline-block;
    color: white;
}

.menu-item{
  /* vertical-align: middle; */
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 50px;
}

#menu-link{
  vertical-align: middle;
  color:red;
}

.navbar-right{
  left: 0;
}

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

.about {
    padding: 0px;
    font-size: 35px;
}

.archive {
    margin-top: 90px;
}

hr{
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 7px 0;
  margin: 0px 0;
}

.archivetitle{
  font-size: 60px;
  margin-bottom: 0px;
}
.archive-text {
    margin-bottom: 30px;
    font-size: 20px;
}

.archive-search {
    background-color:black;
}

.first-archive {
    margin-top: 60px;
}

.habitat-names {
    padding-top: 120px;
    margin-bottom: 60px;
}

.archive-name {
    margin-top: 30px;
}

.archive-flower-name {
    color: white;

}

hr {
    border-top: 2px solid white;
}

.btn-archive {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
}

.search-text {
    color: white;
}

.search-text:hover { COLOR: green; }

.footer {
    height: 300px;
    /* background-color: coral; */
}

.collapse-container {
    padding-bottom: 60px;
}

.btn-archive {
    border-radius: 0px!important;
    background-color: black;
    color: white;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}


.common{
  margin-top: auto;
  margin-bottom: auto;
}

.commontext{
    padding-left: 10px;
    font-size: 15px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Sticky navbar3</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!--top header-->
  <div class="container home" id="home">
    <div class="row">
      <video autoplay muted loop id="myVideo">
          <source src="Time-Lapse.mp4" type="video/mp4">
      </video>
      <div class="col-md-2 logo"><img style="margin-top: 20px; margin-left:0px; padding:0px;" class="img-fluid" src="Logo_01.png" />
      </div>
      <div class="col-md-7">

      </div>
      <div class="col-2">
        <div class="seeds" id="countup">
          <div style="font-size:60px; text-align: center;" id="days"></div>
          <div style="font-size:20px; text-align: center;" id="seeds"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid borderme" data-toggle="sticky-onscroll" id="navbar">
    <div class="d-flex navs">
      <div class="mr-auto p-2">
        <img height="70px" src="/icons/Flora_Logo.png">
      </div>
      <div class="p-2 menu-item">
        <a href="#about"><strong>ABOUT</strong></a>
      </div>
      <div class="p-2 menu-item">
        <a class="menu-item" href="#shiftdown"><strong>ARCHIVE</strong></a>
      </div>
      <div class="p-2 menu-item">
        <a class="menu-item" href="#publication"><strong>PUBLICATION</strong></a>
      </div>
      <div class="p-2 menu-item">
        <a class="menu-item" href="#sign-in"><strong>SIGN-IN</strong></a>
      </div>
    </div>
  </div>


  <!-- About Container -->
  <div class="container about" id="content">
    <div class="row">
      <div class="col-12">
        <span id="about"></span>
        <span style="color:white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit </span>        Flora is a seed repository dedicated to collecting<sup>(1)</sup>, archiving<sup>(2)</sup> and distributing<sup>(3)</sup> native Irish wildflowers. Over 100 native Irish plants are now classified as endangered. Flora is essential in preventing
        disease, climate change, and biodiversity loss. We rely on the support of people to assist in the re-introduction of these wildlflowers across Ireland by distributing seeds in their local area.
      </div>
    </div>
    <!-- <h3 class="read-more">READ MORE</h3> -->
    <div class="row">
      <div class="col-12 collapse" id="aboutshow">
        Flora is a seed repository dedicated to collecting(1), archiving(2) and distributing(3) native Irish wildflowers. Over 100 native Irish plants are now classified as endangered. Flora is essential in preventing disease, climate change, and biodiversity
        loss. We rely on the support of people to assist in the re-introduction of these wildlflowers across Ireland by distributing seeds in their local area.
      </div>
    </div>
    <button type="button" class="btn btn-archive SeeMore" data-toggle="collapse" data-target="#aboutshow">READ MORE</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script>
    window.onscroll = function() {
      myFunction()
    };

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

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
  </script>

  <script>
    window.onload = function() {
      upTime();
    }

    function upTime(countTo) {

      var num = Math.floor(Math.random() * 2500) + 1500;

      timeout();

      function numberWithCommas(x) {
        x = x.toString();
        var pattern = /(-?\d+)(\d{3})/;
        while (pattern.test(x))
          x = x.replace(pattern, "$1,$2");
        return x;
      }

      function timeout() {
        setTimeout(function() {
          num++;
          number = numberWithCommas(num);
          // document.getElementById('days').firstChild.nodeValue = number;
          document.getElementById('days').innerHTML = number;
          document.getElementById('seeds').innerHTML = "Seeds Planted";

          timeout();
        }, 1000);
      }
    }

    function refreshFunction() { // reloads the entire page as if newly opening it
      location.reload();
    }
  </script>
</body>

</html>