IE 中未触发 jQuery 类更改？ Chrome/FF 按设计工作

Question

我有一个小的 jQuery 脚本，一旦页面滚动到 200px 阈值以下，它应该显示一个固定的导航菜单，然后一旦该部分到达视口顶部，就将每个菜单列表项上的类更改为“当前” .

问题是类更改在 IE 中不起作用（在 IE11 中测试）。 IE 控制台没有抛出任何错误，并且按照 Chrome/FF 中的设计工作。

fadeIn/hide 功能可以完美运行。我还有另一段脚本可以根据点击事件切换一些内容，而且它也适用于所有方面。

我查看了其他一些问题，答案围绕 IE 中的模糊/焦点展开，但我的理解水平还没有达到。

这可能无关紧要，但我在本地托管了 jQuery 1.11。

我是否忽略了一些显而易见的事情，或者这更涉及？非常感谢任何帮助！

网站的粗略工作版本位于www.4sdesignstudio.com/new-projects/bwh/index.html。

HTML 的快速精简版：

<footer class="main-links">
            <ul>
            <li><a href="#main" class="scrolly button-row">Welcome</a></li>
            <li><a href="#main2" class="scrolly button-row">The Tasting Room</a></li>
            <li><a href="#main3" class="scrolly button-row">Tasting Menu</a><li>
            <li><a href="#main4" class="scrolly button-row">Upcoming Events</a><li>
            <li><a href="#main6" class="scrolly button-row">The Artwork</a><li>
            <li><a href="#main5" class="scrolly button-row">Current Wine Releases</a><li>
            <li><a href="#main7" class="scrolly button-row">Wine Club</a><li>
            <li><a href="#footer" class="scrolly button-row">Contact Us</a><li>
        </ul>                               
        </footer>


<section id="main" class="marker">
    A bunch of content
</section>

<section id="main2" class="marker">
    A bunch of content
</section>

<section id="main3" class="marker">
    A bunch of content
</section>

<!--  ...etc, etc -->

jQuery 脚本：

<script>
$(document).ready(function(){

// Cached variables to avoid multiple jQuery calls
var $mainLinks = $('.main-links');
var $headerLogo = $('.header-logo');
var $mainTastingMenu = $('#main-tasting-menu');
var $dessertTastingMenu = $('#dessert-tasting-menu');
var $menuSwitch_1 = $('#menu-switch1');
var $menuSwitch_2 = $('#menu-switch2');

// Plugins
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();

// Event handlers

$menuSwitch_1.on('click', function(event) {
  $mainTastingMenu.toggle('show');
  $dessertTastingMenu.toggle('hide');
});

$menuSwitch_2.on('click', function(event) {        
  $mainTastingMenu.toggle('hide');
  $dessertTastingMenu.toggle('show');
});


$(window).on('scroll', function(event) {

if ($(this).scrollTop() > 200) {

  $mainLinks.fadeIn();
  $headerLogo.fadeIn();

} else {

  $mainLinks.hide();
  $headerLogo.hide();
}


var top = $(this).scrollTop(),
    idx = $('section.marker').sort(function (a, b) {
            return top - $(b).offset().top;
          }).first().index('section.marker'),
    el  = $('.main-links li a').eq(idx);

if (!el.hasClass('current')) {
    $('.main-links li a').removeClass('current');
    el.addClass('current');
}
});

});</script>    

Answer 1

有问题的代码就在这里：

var top = $(this).scrollTop(),
idx = $('section.marker').sort(function (a, b) {
        return top - $(b).offset().top;
      }).first().index('section.marker'),
el  = $('.main-links li a').eq(idx);

如果你在 IE 中调试它，你永远不会得到除 0 以外的索引。

即使在玩了一段时间之后，我还是不太明白你的逻辑 - 所以我决定用自己的方法来确定当前显示的 div： http://jsfiddle.net/6mkh2xme/3/

这已经在 IE（windows，一些古老的版本）以及 Mac 上的 Chrome 和 FF 上进行了测试。