小编Jco*_*ode的帖子

我写了一些简单的jQuery,让我的导航栏的背景相对于用户滚动位置从透明变为蓝色.

  $(window).scroll(function(){

  var range = $(this).scrollTop();
  var limit = 450;

  var calc = range / limit;
  console.log(range);

  //Bg Opacity Control
  if (range === 0) {
    $('.navBg').css({
      opacity: 0
    });

  }else if(range < limit){
    $('.navBg').css({
      opacity: calc
    });


  }else if(range > limit){
    $('.navBg').css({
      opacity: 1
    });
  }

});

我的下一个任务是进行字体颜色转换.我希望颜色的更改方式与导航背景更改的方式相同(相对于用户滚动位置).我首先创建了两个包含十六进制颜色值的数组,以表示字体转换的颜色比例.

  //Blue to White
  var fontScale = ["#19BFFF",
                  "#336CFF",
                  "#4CCDFF",
                  "#66D4FF",
                  "#7FDBFF",
                  "#99E2FF",
                  "#B2E9FF",
                  "#CCF0FF",
                  "#E5F7FF",
                  "#FFF"];

  //White to Gray
  var hoverScale = ["#eaeaea",
                   "#d6d5d5",
                   "#c1c0c1",
                   "#adacac",
                   "#989798",
                   "#848283",
                   "#6f6e6e",
                   "#5a595a",
                   "#464445",
                   "#323031"]; …