Question

首先，请不要因为问这个问题而对我大喊大叫。我知道这已有一百万个主题，遗憾的是我已经全部阅读了这些主题，而我仍然无法弄清楚我做错了什么。

我创建了一个简单的网站，试着了解其工作原理，以便我可以在更复杂的网站上实现它。

我只是使用了我发现并尝试过的众多脚本之一。所有这些都没有任何效果。

HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>

<head>
    <title> </title>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script>
    <link rel="stylesheet" href="styles.css">



 <script type="text/javascript">

 $(document).ready(function() {

  var colordivs = $('#fade div');

  $(document).scroll(function(e) {
      var scrollPercent = ($(window).scrollTop() / $('#fade').outerHeight()) * 100;

      if (scrollPercent > 0) {
          if (scrollPercent < 33) {
              var opacity = 1 - (scrollPercent / 33);
              $(colordivs[0]).css('opacity', opacity);
          }
          else if (scrollPercent > 66) {
              var opacity = 1 - (scrollPercent / 100);
              $(colordivs[0]).css('opacity', 0);
              $(colordivs[1]).css('opacity', 0);
              $(colordivs[2]).css('opacity', opacity);
          }
          else if (scrollPercent > 33) {
              var opacity = 1 - (scrollPercent / 66);
              $(colordivs[0]).css('opacity', 0);
              $(colordivs[1]).css('opacity', opacity);
          }
      }
  });

  });



</script>       
 </head>

 <body>
<div class="container">
    <div id="fade">
    </div>  
</div>
 </body>
</html>

CSS文件：

body {
    background-color: #ffcc00;
}

.container {
height: 6000px;
width: 100%;
margin: 0 auto;

}
#fade {
background-image: url("skyline.png");
width: 100%;
height: 600px;
position: fixed;
overflow: hidden:
}

所以我想我的第一个问题是我拥有一切吗？我错过了一个jquery脚本或其他东西。第二个重要的是css文件在html文件中正确链接的位置？就像我说的，如果与css文件有任何关系，我不完全理解不透明度的变化是如何工作的。

我完全理解HTML和CSS，我理解脚本中发生的事情就好了，我只是无法弄清楚为什么他们没有互相交谈并导致改变。

提前感谢任何指导！

Answer 1

更改

  var colordivs = $('#fade div');

到

  var colordivs = $('#fade');

滚动时更改Div不透明度

1 个答案: