CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mati
mati

Reputation: 97

How to animate addClass/removeclass in JQuery

I am trying to do menu. When user scroll down menu disppears, when scroll up it appears again. I have problem with adding animation effect. I do not want the menu disappearing immediately, but it will take some time. I tried with animate function but it wouldn't work.

Thanks.

<body>
  <nav class="site-navbar">
  </nav>
</body>

body {
  height:300vh;
  width:100%;
  background-color:yellow;
  margin:0;
  padding:0;
    .site-navbar {
      width:100%;
      height:40px;
      background-color:red;
      position:fixed;
      top:0px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease

  }
    .nav-up {
      top:-40px;
    }
}


        var prevScroll = 0;
                $(document).scroll(function() {
            var currentPos = $(this).scrollTop(); 
            if(currentPos > prevScroll) {
               $('nav').removeClass('site-navbar').addClass('nav-up');
  }
            else {
                $('nav').removeClass('nav-up').addClass('site-navbar');
            }

            prevScroll = currentPos;

        })

https://jsfiddle.net/m6r8z8wp/2/

Upvotes: 0

Views: 378

Answers (2)

Durga
Durga

Reputation: 15604

DEMO

var prevScroll = 0;
$(document).scroll(function() {
    var currentPos = $(this).scrollTop();
    if (currentPos > prevScroll) {
        $('nav').slideUp("slow", "linear");
    } else {
        $('nav').slideDown("slow", "linear");
    }

    prevScroll = currentPos;

})
body {
    height: 300vh;
    width: 100%;
    background-color: yellow;
    margin: 0;
    padding: 0;
}
.site-navbar {
    width: 100%;
    height: 40px;
    background-color: red;
    position: fixed;
    top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-navbar">

</nav>

Alternative you can use jquery slideUp() / slideDown() for animation

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

there's no need to remove class before adding a new one FIDDLE

var prevScroll = 0;
$(document).scroll(function() {
    var currentPos = $(this).scrollTop(); 
    if(currentPos > prevScroll) {
    $('nav').addClass('nav-up');
    } else {
        $('nav').removeClass('nav-up').addClass('site-navbar');
    }
    prevScroll = currentPos;
});

If you remove the class you remove the transition as well

Upvotes: 2

Related Questions