scrollTop funktioniert nicht wie erwartet in Firefox?

Question

Also mein Problem ist, dass Code in Chrome funktioniert, aber in Firefox ist es immer display:none,. Irgendwelche Vorschläge was falsch ist?

$(document).on('scroll', function() { 

      if($(this).scrollTop()>=$('.compare-wrapper').position().top){ 
       $('.compare-menu-fixed').css('display','block'); 
      } 
      else{ 

       $('.compare-menu-fixed').css('display','none'); 

      } 
}); 

Answer 1

Sie haben offset().top zu verwenden, um den Abstand von oben zu kommen, bis .compare-wrapper, wo Ihre div platziert wird. Versuchen Sie wie folgt:

Die .position() -Methode ermöglicht es uns, die aktuelle Position von ein Element relativ zum Offset-Elternteil abzurufen. Vergleichen Sie dies mit .offset(), die die aktuelle Position relativ zum Dokument abruft.

$(document).on('scroll', function() { 
 

 
    if($(this).scrollTop()>=$('.compare-wrapper').offset().top){ 
 
      $('.compare-menu-fixed').css('display','block'); 
 
     } 
 
    else{ 
 
     $('.compare-menu-fixed').css('display','none'); 
 
     } 
 
});

body{ 
 
    height:1600px; 
 
} 
 
.compare-wrapper{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#111; 
 
    margin-top:100px; 
 
    position:relative; 
 
} 
 
.compare-wrapper > .compare-menu-fixed{ 
 
    width:200px; 
 
    height:200px; 
 
    background:#f22; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="compare-wrapper"> 
 
<div class="compare-menu-fixed"></div> 
 
</div>