Question

我正在尝试使用JS文件根据滚动位置加载css。我有一个标题div，有三个嵌套的div，这个JS正在修改。这就是我所拥有的。

JS：

var titles = [
'Pick 1',
'Pick 2',
'Pick 3',
'Pick 4',
'Pick 5',
'"Quote 1"',
'"Quote 2"',
'"Quote 3"',
'"Quote 4"',
'"Quote 5"',
'Footer Title',
''
];

$(window).scroll(function(){
var pos = $(this).scrollTop(); 
var slideTitle1 =  $("#slideTitle1").offset().top;
var slideTitle2 =  $("#slideTitle2").offset().top;
var slideTitle3 =  $("#slideTitle3").offset().top;
var slideTitle4 =  $("#slideTitle4").offset().top;
var slideTitle5 =  $("#slideTitle5").offset().top;
var slideFooter =  $("#slideFooter").offset().top;

if( pos < slideTitle1 - 300) {
    $('#title').slideUp();
}
if( pos > slideTitle1 - 300) {
    $('#title').slideDown();
}
if( pos > slideTitle1 - 300) {
    $('#textBox').text(titles[0]);
    $('#quoteBox').text(titles[5]);

}
if( pos > slideTitle2 - 100) {
    $('#textBox').text(titles[1]);
    $('#quoteBox').text(titles[6]);
}
if( pos > slideTitle3 - 100) {
    $('#textBox').text(titles[2]);
    $('#quoteBox').text(titles[7]);
}
if( pos > slideTitle4 - 100) {
    $('#textBox').text(titles[3]);
    $('#quoteBox').text(titles[8]);
}
if( pos > slideTitle5 - 100) {
    $('#textBox').text(titles[4]);
    $('#quoteBox').text(titles[9]);
}
if( pos > slideFooter - 50) {
    $('#textBox').text(titles[11]);
    $('#quoteBox').text(titles[10])
    $('#quoteBox').css("font-size", "35px", "text-align", "center");
    $('#textBox').css("display", "none");
    $('#rateBox').css("display", "none");
}
if( pos < slideFooter - 50) {
    $('#quoteBox').css("font-size", "30px", "text-align", "left");
    $('#textBox').css("display", "block")
    $('#rateBox').css("display", "block")
}
});

CSS：

#title { 
width: 100%; 
background: black; 
height: 85px;   
position: fixed;
margin-top: 0px;
padding-top: 10px;
font-size: 30px; 
color: white;
box-shadow: 0px 10px 5px #888888;
z-index: 1001; 
display: none;
} 

#textBox {
width: 250px;
height: 40px;
margin: 0 auto;
margin-left: 25px;
padding-top: inherit;
float: left;
}

#quoteBox {
width: 50%;
 height: 40px;
margin: 0 auto;
padding-top: inherit;
}

.rateBox {
width: 75px;
height: 75px;
float: right;
margin: 0 auto;
margin-right: 25px;
border: green 1px solid;
background-image: url(../img/rating/rating5.png);
background-repeat: no-repeat;
}

.5 {
background-image: url(../img/rating/rating5.png);
background-repeat: no-repeat;
}

.4.5 {
background-image: url(../img/rating/rating4.5.png);
background-repeat: no-repeat;
}

.4 {
background-image: url(../img/rating/rating4.png);
background-repeat: no-repeat;
}

.3.5 {
background-image: url(../img/rating/rating3.5.png);
background-repeat: no-repeat;
}

.3 {
background-image: url(../img/rating/rating3.png);
background-repeat: no-repeat;
}

来源：

<div id="title">
<div id="textBox">
</div>
<div class="rateBox">
</div>
<div id="quoteBox">
</div>
</div>

但是当我尝试添加 $（'＃rateBox'）。css（“background”，“url（'../ img / rating / rating3.png'）”）; 时如果是3-7它什么都不做。实际上它似乎撤消了我设置的默认白色背景颜色。到目前为止，我尝试了所有我想要解决的问题，但没有任何组合可行。我做错了什么？

Answer 1

所以我找到了这个问题的答案Boldewyn你可能已经得到它，因为将我的文件路径从../img/rating/rating5.png更改为rating / rating5.png工作并且很好。我也在站点文件夹的一侧将评级文件夹从img文件夹中移出到作为index.html文件的级别。

@Mike'Pomax'Kamermans我试图理解你的循环，但是有一些更详细的代码和更多的解释，如何循环修复雷区，使内容更容易管理，那么他们现在我不能做头或尾你的帖子。 IMO数组文本很容易更新，它们插入的位置永远不会改变，如果评级发生了变化，你只需要将文件名从ratingX.png更改为你想要的数字。我使用的命名约定解决了这个问题。

通过javascript文件加载css，无法正常工作

1 个答案: