Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Add a Sticky Navigation Bar Adding Sticky Navigation

Robin Malhotra
Robin Malhotra
14,883 Points
Posted by Robin Malhotra
Robin Malhotra
14,883 Points

Reverse Transition?

Is there any way to get the header to smoothly transition back from black to white? I tried doing this:

.header {
  background-color: white;
  transition:1s;

}

but to no avail.

3 Answers

Brian Polonia
Brian Polonia
25,139 Points
Brian Polonia
Brian Polonia
25,139 Points

Your question has to do with CSS and not Javascript.

should probably look something like this:

.header {
  height: 100px;     /*the dimension are arbitrary - use your dimensions*/
  width: 500px;
  background-color:black;  /*initial color should be set to black*/
  transition: all 1s;  
}

/*when the state changes (for example below it changes on hover) 
then the above transition rule will take effect. It will transition to 
white on hover and transition back to black when you hover off*/

.header:hover{
  background-color:white;
}

Hope this helps.

  • bp
Robin Malhotra
Robin Malhotra
14,883 Points
Robin Malhotra
Robin Malhotra
14,883 Points

I found an easier way.

$(".header").on('sticky-end',function(){
    console.log("asdfsd");
    $("h1.description").html("We build apps");
/*  $("h1.description").css("background-color","white"); */

    $("div.frame,div.green").css("background-color", "red");
    $("div.frame,div.green").css("transition", "1s");

    $("div h5").html("Wanna work with us");
});
Brian Polonia
Brian Polonia
25,139 Points
Brian Polonia
Brian Polonia
25,139 Points

Based on your original question... That actually isn't easier than just doing it in CSS. Look at how simple this code is.

.header {
  background-color:black;  
  transition: all 1s;  
}

.header:hover{
  background-color:white;
}

Thats all you need to accomplish what you asked in your question.

But hey, whatever works for you.

All the best,

  • bp
Paul Jackson
Paul Jackson
8,943 Points
Paul Jackson
Paul Jackson
8,943 Points

The CSS posted here doesn't do make the transition go back from black to white though. To transition back to the original color all you're supposed to have to do is put a transition in the original state like so: 

.header {
    background: white;
    transition: 1s;
}

.is-sticky .header {
    background: black;
    transition: 1s;
}

But for some reason, that doesn't work... What am I missing?

Leon Segal
Leon Segal
14,754 Points

Is it because we are only transitioning the colour?

The height of the header changes to zero when the is-sticky class is lost, maybe the code is working, you just can't see it?