jQuery-元素穿越另一个元素

Question

I have a fixed div on the page which contains a logo and as the user scrolls and this logo passes over other divs I wnat to the change the colour of the logo.

I have this working over a single div but need to it work across multiple so any help appreciated.

The WIP site can be seen here... dd.mintfresh.co.uk - if you scroll down you'll (hopefully) see the logo change from black to white as it crosses an illustrated egg. I need the same to happen when it crosses other divs further down the page.

The script so far...

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%)"});  
  }
}
);

Any help appreciated. Thanks!

Answer 1

you need to fire a div scroll event. you can assign

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

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

or you can assign a class to divs which you want to change the color

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

Answer 2

You can use like this :-

 $(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> 

As your site code you can do like this :

$(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%)'});
      }
      }
   });    
});