How to change a color based on scroll position

Question

Hello! I’ve been searching for a while and I find a lot of things, but for what I specifically want, no. On my Tumblr blog, I want to put a border around posts with approximately 5px, whose color changes based on scroll position. I want it to be faded and therefore to have many colors. Should I create a div for the right border? But how and what css or javascript do I use to make the "animation"? Thank you, and I’m sorry for being a little Noob

Answer 1

You can use the jQuery $.scroll event and scrollTop property to find out where the bar is and use this value to calculate a color of your choice. I made that example for you:

$(window).scroll(function(){
 var posicao = $(window).scrollTop();
 var cor = Math.round(posicao / 1000);
 $('#post').css('border-color', pegarCor(cor));
});
pegarCor = function(cor){
  switch(cor){
    case 1:
      return "#ff0ff0";
      break;
    case 2:
      return "#00aabc";
      break;
    case 3:
      return "#00ee54";
      break;
    case 4:
      return "#334454";
      break;
    case 5:
      return "#ff00ff";
      break;
    default:
      return "#00aa12";
      break;
  }
}

#post{
  border: 5px solid;
  border-color: #000;
  position: fixed;
  width:200px;
  height:100px
}
body{
height: 5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post">
Esse é o seu post
</div>

Answer 2

I took advantage of the same code that LF Ziron posted and modified so that as the page goes down using scroll, Divs will change color

$(window).scroll(function(){
 var posicao = $(window).scrollTop();
 var cor = Math.round(posicao / 1000);
 $('.post').css('border-color', pegarCor(cor));
});
pegarCor = function(cor){
  switch(cor){
    case 1:
      return "#ff0ff0";
      break;
    case 2:
      return "#00aabc";
      break;
    case 3:
      return "#00ee54";
      break;
    case 4:
      return "#334454";
      break;
    case 5:
      return "#ff00ff";
      break;
    default:
      return "#00aa12";
      break;
  }
}

.post{
  border: 5px solid;
  border-color: #000;
  width:200px;
  height:100px;
  margin-bottom: 10px;
}
body{
height: 5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>
<div class="post">
Esse é o seu post
</div>