在滚动上改变Div的可见度

Changing Div oppacity on scroll

本文关键字：可见度 Div 改变 滚动      更新时间：2023-09-26

首先，请不要因为我问了这个问题而对我大喊大叫。我知道这方面的话题已经有一百万个了，遗憾的是，我已经把它们都读了一遍，但我仍然不知道我做错了什么。

我创建了一个简单的网站，试图了解它是如何工作的，以便我可以在更复杂的网站上实现它。

我只是使用我发现并尝试过的许多脚本之一。

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，我理解脚本中发生了什么，我只是不明白为什么他们不互相交流并引起改变。

提前感谢任何指导!

变化

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


  var colordivs = $('#fade');
相关文章：