scrollTop在Firefox中無法正常工作？

Question

所以我的問題是，代碼在Chrome中起作用，但在Firefox中它總是display:none，。任何建議有什麼不對？

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

你必須使用offset().top去，直到.compare-wrapper在您的div放在離頂部的距離。嘗試如下，

.position（）方法允許我們檢索 元素相對於偏移父級的當前位置。將其與 .offset（）進行對比，該文件檢索相對於 文檔的當前位置。

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