【发布时间】：2017-02-14 00:30:02
【问题描述】：
我编写了一些简单的 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 数组索引正在将正确的索引值记录到我的控制台。
有什么想法吗？
【问题讨论】：
-
但你没有提供 html
-
为您添加的html
-
您应该根据 .css() api.jquery.com/css 使用 .css("color", colorVar) 设置 css，但您尝试不设置属性
标签： javascript jquery html css scrolltop