jQuery : CSS smooth transition on scroll

Question

I want create a navbar that can change the background-color when scroll on spesific scrollTop . It's working perfectly, but I want add a transition between change both color. It's mean when I scroll more and more to bottom the navbar background-color getting blue. Here's my fiddle https://jsfiddle.net/7efc61qs/ .

Thanks in advance

Answer 1

 var div = $('.red'); var limit = 500; $(window).scroll(function(){ var st = $(this).scrollTop(); div.css({ 'opacity' : (1 - st/500) }); }) 

 .red { background:red; position:fixed; width:100%; height:20px; } .blue { position:fixed; background:blue; height:20px; width:100%; } .content { height:20px; position:fixed; width:100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="blue"> </div> <div class="red"> </div> <div class="content"> abc </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

when scrolltop reaches 500px then opacity of div.red is 1 - 500/500 = 0

Answer 2

You might want to check out Scrollie

Funsella made a great example over at CodePen for you to play with: https://codepen.io/Funsella/pen/yLfAG

$( window ).ready(function() {

var wHeight = $(window).height();

$('.slide')
  .height(wHeight)
  .scrollie({
    scrollOffset : -50,
    scrollingInView : function(elem) {

      var bgColor = elem.data('background');

      $('body').css('background-color', bgColor);

    }
  });

});

Link to Scrollie on GitHub