javascript - Chrome 和 Internet Explorer 控制台显示 'top' 是 'undefined' ，但 Safari 和 Firefox 没有错误

Question

我被这个错误困扰了。为什么Internet Explorer 9 Chrome 版本 45 显示此错误？

Top is undefined

我错过了什么吗？我的一些 HTML 布局在 Internet Explorer 9 中也受到影响。而且，我不知道字体系列或 div 的百分比宽度是否会出现此错误。有什么办法可以解决这个问题吗？

var bodyScroll = 0;
$(document).ready(function() {

  bodyScroll = $(window).scrollTop();
  currentP = 0;
  currentP1 = 0;
  currentP2 = 0;
  $(window).scroll(function() {

    scrTop = $(window).scrollTop();
    bodyScroll < scrTop ? currentP = currentP - .8 : currentP = currentP + .8;
    $(".mainContainer, .mobileBanner").css('background-position', "0
 " + currentP + "px");
    if (scrTop > $("#core-services .core-banner").position().top - 400) {
      bodyScroll < scrTop ? currentP1 = currentP1 - .8 : currentP1 = currentP1 + .8;
      $("#core-services .core-banner").css('background-position',
 "0 " + currentP1 + "px");

    }
    if (scrTop > $(".core-contact").position().top - 400) {
      bodyScroll < scrTop ? currentP2 = currentP2 - .8 : currentP2 = currentP2 + .8;
      $(".core-contact").css('background-position', "0 " + currentP2 + "px");

    }
    bodyScroll = scrTop;
  });
});

Answer 1

以下内容适用于我，在 Chrome 43 中没有错误(我将使用 Internet Explorer 9 进行测试)

编辑:它可以在 Internet Explorer 9 上运行。所以我怀疑错误不在您发布的代码中。您需要构建一个最小的示例来重现错误，方法是从页面中取出除相关代码之外的所有其他内容，然后发布 JSFiddle 或 Stack Overflow native 代码(如这篇文章)，然后人们可以在 Internet Explorer 9 中尝试并确认问题所在。这只是正常的调试。你会明白的。 Internet Explorer 9 和 Chrome 应支持position().top。

编辑:作为 Internet Explorer 中可能出现问题的示例，请检查是否有任何与 HTML 元素 ID 名称相同的全局变量。如果您这样做，可能会触发“兼容模式”，从而将 Internet Explorer 降级为 Internet Explorer 8 模式，该模式不支持“article”html5 元素，因此这些元素不会有“top”等元素。

var bodyScroll = 0;
$(document).ready(function() {

  bodyScroll = $(window).scrollTop();
  currentP = 0;
  currentP1 = 0;
  currentP2 = 0;
  $(window).scroll(function() {

    scrTop = $(window).scrollTop();
    bodyScroll < scrTop ? currentP = currentP - .8 : currentP = currentP + .8;
    $(".mainContainer, .mobileBanner").css('background-position', "0 " + currentP + "px");
    if (scrTop > $("#core-services .core-banner").position().top - 400) {
      bodyScroll < scrTop ? currentP1 = currentP1 - .8 : currentP1 = currentP1 + .8;
      $("#core-services .core-banner").css('background-position', "0 " + currentP1 + "px");

    }
    if (scrTop > $(".core-contact").position().top - 400) {
      bodyScroll < scrTop ? currentP2 = currentP2 - .8 : currentP2 = currentP2 + .8;
      $(".core-contact").css('background-position', "0 " + currentP2 + "px");

    }
    bodyScroll = scrTop;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section id="core-services">
  <div class="core-banner">
    <img src="images/core-services.jpg" class="img-responsive"/>
  </div>
</section>