如何创建由窗口滚动控制的颜色过渡

Question

我写了一些简单的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"];

我的scrollTop()限制设置为450,在这些转换应该发生的地方,我在每个数组中有10种颜色.我想通过迭代数组中的颜色,每次用户向下滚动45px(450/10 = 45)时更改字体颜色的CSS.

这是我的jQuery选择器,用于使用我在上面发布的数组改变颜色的元素:

    //Main Font color to use fontScale array
    $('.navbar .navbar-header .navbar-brand')
    $('.navbar #navbar ul li a ')

    //active links to use hoveScale array
    $('.navbar #navbar .navbar-nav > .active > a')
    //Hover links to use hoverScale array
    $('.navbar #navbar ul li a:hover')

我不确定我应该使用for循环,while循环,还是纯粹的if语句？一些建议或方向将不胜感激!我也可以根据要求发布更多代码.

干杯!

**更新

这是我的HTML.

  <div class="navBg">
    </div>
    <nav class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="navbar-brand" href="#home">JG</span>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

这是我更新的jQuery:

  var currentFontIndex = range * fontScale.length / limit;

  currentFontIndex = Math.round(currentFontIndex);
  console.log(fontScale[currentFontIndex]);

  if(currentFontIndex > fontScale.length){

    $('.navbar .navbar-header .navbar-brand').css({
      color: fontScale[currentFontIndex]
    });
    $('.navbar #navbar ul li a').css({
      color: fontScale[currentFontIndex]
    });

  }

由于某种原因,样式没有应用,我不知道为什么.我的选择器已正确设置为覆盖CSS样式表中设置的样式.此外,fontScale数组索引正在向我的控制台记录正确的索引值.

有任何想法吗？

Answer 1

如果你可以将一些Y坐标(0px到450px)转换为不透明度(0到1),你可以对数组索引做同样的事情!

0px -> 0 opacity -> index 0
450px -> 1 opacity -> index  10 

...

currentScrollTop-> currentColorIndex 

交叉产品!

currentColorIndex = currentScrollTop * 10 / 450

要么

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

var fontScale=[
 ....
]

var currentFontIndex = range * fontScale.length / limit;

 //of course, you can't only have integer for index,
 //so you'll have to chose a rounding function, like: 
currentFontIndex = Math.round(currentFontIndex);

if(currentFontIndex > fontScale.length)
     currentFontIndex = fontScale.length

$('.navBg').css('color', fontScale[currentFontIndex]);