Add color to mine when scrolling the page and remove when you reach the top

Question

I am developing a menu with bootstrap and it does the following it gets at the top of the page and as soon as the user scrolls the page down it disappears and when the user scrolls up the menu appears so well then the problem is the following by default left the menu with the background-color: transparent more wanted that when the user scrolls the page up the menu was with the white background and when the menu touch at the beginning of the page it becomes transparent again is it possible to do this? follows my code.

NOTE: My code works smoothly the same problem is the background color that is always transparent realize that as my menu does not have a background color it is difficult to see the links even more when you have more scrolling than the background will already be white.

HTML:

<nav class="navbar navbar-default navigation-bar is-visible" data-nav-status="toggle">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><img src="images/logo.png" class="img-responsive" alt="Equiep hórus" /></a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right ">
                <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Treinamento</a></li>
                <li><a href="#">Instrutor</a></li>
                <li><a href="#">Quem somos</a></li>
                <li><a href="#">Onde encontrar</a></li>
                <li><a href="#">Contato</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>

SASS:

.navbar-default{
      background-color: transparent;
      border: none;

      .navbar-brand{
        position: absolute;
        top: 0px;
        width: 90px;
      }

      ul{
        li{
          a{
            color: #fff;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
          }
        }
      }
    }

    .navigation-bar {
        padding:2rem 3rem 2rem;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1000;

        &.is-hidden {
          opacity: 0;
          -webkit-transform: translate(0,-60px);
          -webkit-transition: -webkit-transform .2s,background .3s,color .3s,opacity 0 .3s;
        }

        &.is-visible {
          opacity: 1;
          -webkit-transform: translate(0,0);
          -webkit-transition: -webkit-transform .2s,background .3s,color .3s;
        }
      }

JS:

$(document).ready(function(){
    console.log('Window Height is: ' + $(window).height());
  console.log('Document Height is: ' + $(document).height());

  var previousScroll = 0;

  $(window).scroll(function(){

    var currentScroll = $(this).scrollTop();
    if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){
      if (currentScroll > previousScroll){
        window.setTimeout(hideNav, 300);
      } else {
        window.setTimeout(showNav, 300);
      }
      previousScroll = currentScroll;
    }

  });

  function hideNav() {
    $("[data-nav-status='toggle']").removeClass("is-visible").addClass("is-hidden");
  }
  function showNav() {
    $("[data-nav-status='toggle']").removeClass("is-hidden").addClass("is-visible");
  }

});

Answer 1

Here it is.. quick fix (probably can be improved), but it already serves for you to see how it could do..

I changed the code to use Jquery, maybe it’s clearer how you can use it.

'use strict';

var onTop = false;

// JQuery
$(window).scroll(function() {
  let scrollPosition = $(window).scrollTop();
  
  if(scrollPosition < 10 && !onTop) {
    onTop = true;
    $('.navbar').addClass('onTop');
  }
  
  if(scrollPosition > 10 && onTop) {
    onTop = false;
    $('.navbar').removeClass('onTop');
  }
});

// Javascript vanilla
//var nav = document.querySelector('.navbar');
// window.onscroll = function (evt) {

//  if(window.scrollY < 10 && !onTop) {
//    nav.classList.add('onTop');
//    onTop = true;
//  }
  
//  if(window.scrollY > 10 && onTop) {
//    nav.classList.remove('onTop');
//    onTop = false;
//  }
//};

.navbar {
  height: 30px;
  border: 1px solid black;
  background-color: blue;
  position: fixed;
  transition: background-color .4s ease-in-out;
}

.onTop {
  background-color: transparent;
}

html {height: 1000px}; /* somente para testar o scroll.. */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='navbar onTop'>
  Hello top.
</div>