Sticky navbar disappearing

Question

My sticky navbar had disappeared and text is over the video which should start below it.

https://github.com/shanegibney/stackoverflowStickynavbarIssue

There is a gh-pages link there too.

Basically there is a video which takes up the whole screen initially and on scrolling reveals a navbar immediately under the video. As a user keeps scrolling the navbar reaches the top of the screen where it should stick to the top of the screen remaining always visible. Just like typical sticky navbar behaviour, like https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

At the moment the navbar is not visible at all. This was working earlier and I don't know what I did to change it.

Any help or suggestions would be greatly appreciated,

Thanks

$(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>

Answer 1

Parent class matters

I am working around the same thing to make it sticky throughout the rest of the page. So, here the thing I realized: The display: sticky; only gets sticky around its parent container. So for example, if you have applied this property to navbar which is inside the header/ another div container then it will stick around for 1-5px if you notice by slowing scrolling it. In this case, in order to make it sticky throughout the page, you can apply the sticky property to the container of navbar which is child tag of <body>.

The major difference between sticky and fixed property is: sticky sticks on the top once that has been scrolled and fixed will be always on top. You can go for either way for the navigation bar as some previous replies mentioned to use the fixed property to avoid juggling up.

Answer 2

UPDATED

I just checked your github link and i saw that there is some missing parts in your code

class .home needed to have position:relative; height:100vh to take the full height of the viewport to be able to test the sticky navbar plus you disabled the sticky styles which it should be like that

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

you can check it out on codepen

Please let me know if its help

http://codepen.io/AElkhodary/full/KReoYQ/

Answer 3

You commented out the sticky class.

.sticky {
    position: fixed;
    top: 0;
    width: 100%
}

With this, the functionality is somewhat in place. This might be what you changed?

Answer 4

Using Bootstrap Class

There is a bootstrap class fixed-top, which you can add in your navbar, otherwise you can just replace this line with your navbar.

<nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">

And, for better user experience you can add margin-top to your container.