jQuery类更改未在IE中触发?镀铬/FF工作符合设计要求

jQuery class change not triggered in IE? Chrome/FF work as designed

本文关键字:工作 FF 镀铬 IE jQuery      更新时间:2023-09-26

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

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

fadeIn/hide功能在所有方面都能完美工作。我有另一个脚本来切换一些基于点击事件的内容,这也是全面的。

我在IE中看了一些其他问题,答案围绕模糊/焦点,但我的理解水平还不高。

这可能并不重要,但我在本地托管了jQuery1.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>    

有问题的代码就在这里:

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上进行了测试。