使用CSS不透明度和Javascript在滚动上淡入淡出

Question

我有一个div元素，我想让它在某个滚动点淡入淡出，但我没有使用(慢)或(快)属性，而是使用了CSS不透明度，这样当你上下滚动页面时，它仍然是可见的。这是使用在顶部的标志和工程完美，但由于某些原因，我找不到一个解决方案再次使用它在第二个标志。到目前为止，你可以在我的网站上看到它的使用情况：http://abezieleniec.com/SIDWeb

HTML

<div class="jumbotronsecond">
  <div class="container">
    <div class="biglogo2">
      <img src="images/biglogofull.png">
    </div>
  </div>
</div>

CSS

.biglogo2 {
width:80%;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:130px;
margin-bottom:130px;
opacity:1;
}

JavaScript

$(function(){
    var fadeBegin = 500, 
    fadeFinish = 800, 
    fadingElement = $('.biglogo2');

    $(window).bind('scroll', function(){
       var offset = $(document).scrollTop(), opacity = 0; 
        if( offset <= fadeBegin ){
           opacity = 1; 
       } else if( offset <= fadeFinish ){
           opacity = 1 - offset / fadeFinish;
       }
     fadingElement.css('opacity',opacity);
    });

Answer 1

转念一想，你贴了一个链接是件好事。

<script src="js/vendor/jquery-scrollspy.js"></script>
<script src="js/vendor/jquery-1.10.1.min.js"></script>

在需要jQuery库存在的扩展之后加载它。如果你查看你的控制台(在Chrome f12中然后点击控制台)，你会看到Uncaught ReferenceError: jQuery is not defined

您的代码运行良好，只是您提供的内容不平衡-需要有另一个});来关闭该$(function(){。我缩进了你的代码来显示这一点。我在jsfiddle里不太整洁，对不起。

http://jsfiddle.net/xtqLz/

要使动画更流畅，请替换此行

// fadingElement.css('opacity',opacity);
fadingElement.stop().animate({opacity: opacity}, 200);

这将告诉jQuery将元素动画设置为下一个不透明度，但每次.stop()s前一个动画，否则它们将排队。

http://jsfiddle.net/xtqLz/2/