1

I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.

I got it working with jquery color animation, but then i have to link another library which id like to avoid.

I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..

It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.

TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.

$(document).ready(function(){

  $(document).scroll(function(){

    if ($(this).scrollTop() > 200) {

      if ($("#topnav").hasClass('transparent')){

        $("#topnav").removeClass('transparent');

        $("#topnav").addClass('black').fadeIn(1000);

      }

    } else if ($(this).scrollTop() < 200) {

      if ($('#topnav').hasClass('black')){

        $('#topnav').removeClass('black');

        $('#topnav').addClass('transparent').fadeIn(1000);

      }

    }
  });
});

why doesnt this work?

Cookie
  • 558
  • 8
  • 24
Vegapunk
  • 99
  • 7
  • Possible duplicate of [jQuery fade in background colour](https://stackoverflow.com/questions/2652281/jquery-fade-in-background-colour) – abhishekkannojia Jul 19 '17 at 10:40
  • From the accepted answer there: _"The pure jQuery does not have functionality to animate colors. You have to use jQueryUI or jQuery color plugin."_ – abhishekkannojia Jul 19 '17 at 10:41

2 Answers2

1

You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.

.box {
    background-color: black;
    -webkit-transition: background-color 2s;
    transition: background-color 2s;
}

And in Javascript you can set the color:

if ($(this).scrollTop() > 200) {
    $("#topnav").css({"background-color", "yellow"});
}

jsfiddle

Kokodoko
  • 26,167
  • 33
  • 120
  • 197
0

Try out this simple example

In Your CSS file,

.transparent-background {
  background-color: transparent;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

.black-background {
  background-color: black;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

And in your js file just add class before that attach transparent-background class to topNav container

$(document).ready(function(){
  $(document).scroll(function(){
     if ($(this).scrollTop() > 200) {
         $("#topnav").removeClass("transparent-background").addClass('black-
                background')      
     } else {
        $("#topnav").removeClass("black-
                background").addClass('transparent-background')
     } 
 });
});
kuns
  • 44
  • 3