Create a sliding navbar in jQuery

Question

I'm trying to add CSS to my navbar so that when the user scrolls down the navbar background will slide from the top. Right now the background is just appearing with no transition. What am I missing?

Here's what I have written for jQuery:

$(function () {
    $(document).scroll(function () {
        const $nav = $(".navbar");
        $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
     });
});

SCSS:

.navbar { 
    position: fixed;
    z-index: 1;
    width: 100%;

    &.scrolled { 
        background-color: #FDFDFD;
        transition: background-color top 1s;
        padding-bottom: 24px;
        width: 100%;
    }
}

HTML:


   
      
         Workshops 
         Resources 
         Donate 
   




  blah

user_514878 · Answer

You just need to add a transition rule to the navbar class, e.g. to set transitions on all properties for a duration of 0.5 seconds, use the following:

.navbar {
    transition: all 0.5s;
    // the rest of your CSS
}

Take a look at this CSS transitions page for more information.

Working example using the minimum of your code to illustrate the effect:

$(function () {
    $(document).scroll(function () {
        const $nav = $(".navbar");
        $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
     });
});

.navbar { 
    position: fixed;
    z-index: 1;
    width: 100%;
    transition: all 0.5s;
    background-color: #ccc;
 }
 .scrolled { 
    background-color: #FDFDFD;
    transition: background-color top 1s;
    padding-bottom: 24px;
    width: 100%;
}
.content {height:1000px; padding-top:50px;}


NAV BAR 

Stuff here

Create a sliding navbar in jQuery

1 Answers