Javascript IE中未触发jQuery类更改？设计的铬/FF工作

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

问题在于类更改块在IE中不起作用（在IE11中测试）。IE控制台没有抛出任何错误，它的工作原理与Chrome/FF中的设计相同。

fadeIn/hide功能在所有方面都能完美地工作。我还有另外一个脚本，可以根据点击事件切换出一些内容，这也可以在整个系统中运行

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

这可能无关紧要，但我在本地托管了jQuery1.11

我是否忽略了一些显而易见的事情，或者这更复杂？非常感谢您的帮助

网站的粗略工作版本位于

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

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

一堆内容
一堆内容
一堆内容

jQuery脚本：

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

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

$（文档）.ready（函数（）{
//缓存变量以避免多个jQuery调用
变量$mainLinks=$（'.mainLinks'）；
变量$headerLogo=$（'.header徽标'）；
var$mainTastingMenu=$（“#主品尝菜单”）；
var$甜品品尝菜单=$（“#甜品品尝菜单”）；
变量$menuSwitch_1=$（'menu-SWITCH 1'）；
变量$menuSwitch_2=$（'menu-SWITCH 2'）；
//插件
$（'.lightbox'）.nivoLightbox（）；
$（'.scroll pane'）.jScrollPane（）；
$（'.scroll-pane2'）.jScrollPane（）；
//事件处理程序
$menuSwitch_1.on（'click'，函数（事件）{
$mainTastingMenu.toggle（'show'）；
$dessertTastingMenu.toggle（'hide'）；
});
$menuSwitch_2.on（'click'，函数（事件）{
$mainTastingMenu.toggle（'hide'）；
$deserttastingmenu.toggle（'show'）；
});
$（窗口）.on（'scroll'，函数（事件）{
如果（$（this）.scrollTop（）>200）{
$mainLinks.fadeIn（）；
$headerLogo.fadeIn（）；
}否则{
$mainLinks.hide（）；
$headerLogo.hide（）；
}
var top=$（this）.scrollTop（），
idx=$（'section.marker'）.sort（函数（a，b）{
返回top-$（b）.offset（）.top；
}).first（）.index（'section.marker'），
el=$（'.main links li a'）.eq（idx）；
如果（！el.hasClass（'current'））{
$（'.main links li a'）.removeClass（'current'）；
el.addClass（“当前”）；
}
});
});    

问题代码就在这里：

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：

---

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

您是否尝试过将

ul

部分加入元素链？像

$（'.main links ul li a'）

您的问题似乎就在这里：idx=$（'section.marker'）.sort（函数（a，b）{return top-$（b.offset（）.top；}）.first（）.index（'section.marker'），idx始终为0开IE@ScottW-我将ul添加到元素链中，但运气不佳。@BirgitMartinelle-这是有道理的。我注意到，当我滚动到200px阈值以下以启动fadeIn时，但在第一个section.marker命中之前，它正在将.current类更改应用到最后一个列表项，在本例中为“contact”。有什么解决办法吗？有-请看下面我的答案；）我不擅长jQuery，基本上是一个完全的新手。提议的解决方案不起作用。它会将最初的类更改切换到第四个列表项（“即将到来的事件”），但不会从那里进行更改。你能用我建议的更改更新你的站点（你发布的链接）吗？这更容易理解&谢谢你的耐心。我已将您的更改上载到[链接]（www.4sdesignstudio.com/new projects/bwh/index debug.html）。感谢您的更新。它实际上让事情变得更糟：）因为它打破了FF和Chrome上的页面。。。所以-我无法理解你的逻辑是如何运作的-因此：我提出了我自己的逻辑。我已经在IE的Windows上以及Chrome和FF的Mac上进行了测试-这似乎是可行的，希望这有帮助！我知道你在那里做了什么，这是有道理的。是的，它解决了IE idx的问题。非常感谢你！！！但出于某种原因，类更改解决方案正在破坏Firefox中的jscrollpane插件。我现在正在深入研究，但如果你看到一些明显的东西，请告诉我。我用新代码更新了index-debug.html链接。