Transform this jQuery code into pure Javascript

Question

$(window).scroll(function(){
    var posicao = $(window).scrollTop();
    var cor = Math.round(posicao / 1000);
    $('.social li a').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;
     }
   }

<!-- codigo jquery -->

$(window).scroll(function(){
    var posicao = $(window).scrollTop();
    var cor = Math.round(posicao / 1000);
    $('.social li a').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;
     }
   }


<!-- codigo javascript -->
window.onscroll = function(){
    var position = window.scrollTop;
    var color = Math.round(position / 1000);

    document.querySelectorAll(".social li a").style.borderColor = selectColor(color);
}

selectColor = function(color){
    switch(color){
        case 1:
          cor = "#ff0ff0";
          break;
        case 2:
            cor = "#00aabc";
          break;
        case 3:
            cor = "#00ee54";
          break;
        case 4:
            cor = "#334454";
          break;
        case 5:
          cor = "#ff00ff";
          break;
        default:
          cor = "#00aa12";
          break;
    }

Answer 1

Your mistake is that there is no direct equivalent of .css(...) in pure javascript. You need some kind of loop upon the return of the document.querySelectorAll(".social li a"). You can’t change the style from everyone right there. Assign the list of elements to a variable, loop and assign styles (or, better yet, a class) to each:

var links = document.querySelectorAll(".social li a");
for(var i=0; i<links.length; i++) {
    links[i].classList.add('classe');

    // ou:
    // links[i].style.borderColor = selectColor(color);
}

How was I supposed to know that?

It seems you missed checking your browser console, which must have sent hundreds of error messages during the bearing. Or at least you missed telling it in the question (which partly explains the negatives you received).

Always test your code with the console open (if you don’t know how, see What is console.log?). It will give a useful error message, saying on which line of your code is the problem, and what error it gave. In this case, your console must have reported something like Unable to access the Undefined borderColor property. This is because the list of elements has no property style.