Question

我在页面上有一个固定的div，其中包含一个徽标，并且随着用户的滚动，此徽标会越过我拥有的其他div，以更改徽标的颜色。

我在单个div上进行此操作，但需要在多个div上进行工作，因此需要任何帮助。

可以在此处看到WIP网站... dd.mintfresh.co.uk-如果向下滚动，您将（希望）看到徽标越过图示的蛋，徽标从黑色变为白色。当它越过页面的其他div时，我需要做同样的事情。

到目前为止的脚本...

jQuery(window).scroll(function(){  

  var fixed = jQuery("logo");
  var fixed_position = jQuery("#logo").offset().top;  
  var fixed_height = jQuery("#logo").height();     

  var toCross_position = jQuery("#egg").offset().top;  
  var toCross_height = jQuery("#egg").height();

  if (fixed_position + fixed_height  < toCross_position) { 
    jQuery("#logo img").css({filter : "invert(100%)"}); 
  } else if (fixed_position > toCross_position + toCross_height) {  
    jQuery("#logo img").css({filter : "invert(100%)"});
  } else {    
    jQuery("#logo img").css({filter : "invert(0%)"});  
  }
}
);

任何帮助表示赞赏。谢谢！

Answer 1

您需要触发div滚动事件。您可以分配

           $("div1").scroll(function(){ 
                   //change the color of the div1
                  } 
              }); 

           $("div2").scroll(function(){ 
                //change the color of the div2
              } 
               });

或者您可以为要更改颜色的div分配一个类

          $(".div").scroll(function(){ 
                //change the color of the div which you are scrolling now
                   } 
                   });

Answer 2

您可以这样使用：-

$(window).scroll(function() {
   var that = $(this);
   $('.section').each(function() {
    var s = $(this);
    if (that.scrollTop() >= s.position().top) {
      if(s.hasClass('active')) {
        $('.logo').addClass('invert');
      } else {
        $('.logo').removeClass('invert');
      }
	  }
   });    
});

body {
  padding: 0;
  margin: 0;
}
div {
  background: #f00;
  height: 400px;
}
.logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
}
.logo.invert {
  filter: invert(100%);
}
div:nth-child(even) {
  background: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://dd.mintfresh.co.uk/wp-content/uploads/2018/06/DD_logo.svg" class="logo" />
<div id="page1" class="section"></div>
<div id="page2" class="section active"></div>
<div id="page3" class="section"></div>
<div id="page4" class="section active"></div>
<div id="page5" class="section"></div>

作为您的站点代码，您可以这样做：

$(window).scroll(function() {
   var that = $(this);
   $('#content > section').each(function() {
    var s = $(this);
    if (that.scrollTop() >= s.position().top) {
      if(s.hasClass('black')) {
        $('#logo img').css({filter: 'invert(0%)'});
      } else {
        $('#logo img').css({filter: 'invert(100%)'});
      }
      }
   });    
});

jQuery-元素穿越另一个元素

2 个答案: