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

Question

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

问题是类更改部分在 IE 中不起作用(已在 IE11 中测试)。 IE 控制台没有抛出任何错误，它按照 Chrome/FF 中的设计工作。

淡入/隐藏功能在所有方面都完美无缺。我有另一段脚本可以根据点击事件切换出一些内容，并且它也可以全面工作。

我看过一些其他问题，答案围绕 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 上进行了测试。