Issue on Adding Animation Between Adding and Removing Two Classes

Question

Can you please take a look at this demo and let me know why I am not able to generate smooth transition (something like Smooth Scroll) between adding and removing two classes fixed-top and fixed-bottom while I already added following css roles into them?

  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;

var lastScrollTop = 0;
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    if (st > 500) {
      $('.box').removeClass("fixed-bottom").addClass("fixed-top");
    }
  } else {
    if (st < 500) {
      $('.box').removeClass("fixed-top").addClass("fixed-bottom");
    }
  }
  lastScrollTop = st;
});

html,
body {
  height: 100%;
}

.container {
  height: 2000px;
}

.box {
  width: 100%;
  height: 50px;
  background: #777;
}

.fixed-top {
  position: fixed;
  top: 0;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box fixed-bottom"></div>
</div>

can you please let me know what is the best way to do this (Having smooth moving up and down)?

Answer 1

A stripe jumps up and down because you didn't set values of bottom within .fixed-top and top within .fixed-bottom, then transition prosessor can't realize wich attribute to transite. You need to get window.height() to transite properly. You can do it using jquery, wich makes your css shorter Look at snippet

var lastScrollTop = 0;
var y = $( window ).height() - $('.box').height() + "px";
$('.box').css("top", y);
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    if (st > 500) {
      $('.box').css("bottom", y);
      $('.box').css("top","0");
    }
  } else {
    if (st < 500) {
      $('.box').css("top", y);
      $('.box').css("bottom","0");
    }
  }
  lastScrollTop = st;
});

html,
body {
  height: 100%;
}

.container {
  height: 2000px;
}

.box {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background: #777;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box fixed-bottom"></div>
</div>