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的距离。请尝试以下，

  

.position（）方法允许我们检索当前位置   相对于偏移父项的元素。与此形成鲜明对比   .offset（），它检索相对于的当前位置   文档。

＆＃13;

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;