how to transition in and out the background of my navbar

Question

I set my navbar up with some java script to tell it to add the class .top-of-page when scrolled all the way up in the browser, and that class has a transparent background on the navbar. As soon as I start scrolling down, a background color appears on the navbar. What I am trying to achieve is to have a transition of .3 seconds or so that fades the background on the navbar in and out. Tried a couple different things but couldn't figure this one out, I'm not familiar with java script very much at all.

<script>  $(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 0) {
        $('.navbar-default').addClass('top-of-page');
    } else {
        $('.navbar-default').removeClass('top-of-page');
    }
});
   </script>

.navbar-default {
        background:linear-gradient(#595959, black);
        min-height: 80px;
        position: fixed;
        border-radius: 5px;
        border: none;
        width: 100%;
        z-index: 1; 
    } 

.top-of-page {
        background: transparent;
        transition: all 0.3s ease-in-out 0s;
    }

Possible duplicate of [css transition with linear gradient](https://stackoverflow.com/questions/7363141/css-transition-with-linear-gradient) — Temani Afif, Jan 24 '18 at 04:36

Kosh · Answer 1 · 2018-01-24T02:38:02.163

You cannot set a transition to the gradient, but you can use the following solution:

$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 0) {
        $('.navbar-default').addClass('top-of-page');
    } else {
        $('.navbar-default').removeClass('top-of-page');
    }
});

html, body {height:100%}

#id {height:120%}

.navbar-default {
        background:linear-gradient(#595959, transparent) black;
        min-height: 80px;
        position: fixed; top:0;
        border-radius: 5px;
        border: none;
        width: 100%;
        z-index: 1; 
        
        transition: all 0.3s;
    } 

.top-of-page {
        background: transparent;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-default"></div>
<div id="id"></div>

Another solution uses pseudo element and transition of its opacity:

$(window).on("scroll", function() {
  var scrollPos = $(window).scrollTop();
  if (scrollPos <= 0) {
    $('.navbar-default').addClass('top-of-page');
  } else {
    $('.navbar-default').removeClass('top-of-page');
  }
});

html,
body {
  height: 100%
}

#id {
  height: 120%
}

.navbar-default {
  min-height: 80px;
  position: fixed;
  top: 0;
  border-radius: 5px;
  border: none;
  width: 100%;
  z-index: 1;
}

.navbar-default:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(#595959, black);
  opacity: 1;
  transition: opacity 0.3s;
}

.top-of-page:before {
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-default"></div>
<div id="id"></div>

it won't work, try it .. you cannot have transtion with linear-gradient — Temani Afif, Jan 24 '18 at 01:47

how to transition in and out the background of my navbar

1 Answers1