Question

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

问题是类更改部分在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上进行了测试。

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

1 个答案: