Question

在此页面http://eisenpar.com/chocolate/index-free.html我尝试创建效果：如果您位于页面顶部并进行滚动，页面会在窗口高度滚动并显示固定导航。它在Chrome，Opera和Edge中运行正常（我还没有在Safari中测试过），但在Firefox和IE11中这种效果崩溃：它滚动到底部然后 - 顶部没有任何停顿。在IE中它显示导航，在FF中它没有，只是将我发送到页面的顶部。

以下是此效果的脚本：

var scrollBool = false;

jQuery(window).scroll(function() {

   var winHeight = window.innerHeight;
       navHeight = jQuery('nav').outerHeight();

    if (scrollBool == false) {

      scrollBool = true;

      if(jQuery('nav').hasClass('fixed')) {

        if (jQuery('body').scrollTop() + 10 < winHeight) {

          jQuery('nav').removeClass('fixed');

          jQuery("html, body").stop().animate({
            scrollTop: jQuery('header').offset().top
          }, 700, function() {
            scrollBool = false;
          }); 

        } else {
          scrollBool = false;
        }

      } else {

        if (jQuery('body').scrollTop() < winHeight) {

          if(jQuery('nav a, .link-block a').hasClass('in-scroll')) {

          } else {
            jQuery("html, body").stop().animate({
              scrollTop: jQuery('header').offset().top + winHeight
            }, 700, function() {
              scrollBool = false;
              jQuery('nav').addClass('fixed');

            }); 
          }
        } else {
          scrollBool = false;
        }
      }
    }

});

Answer 1

最后 - 修复。 FF与jQuery('body').scrollTop()存在问题，它无法正确理解，如果我将其更改为jQuery(window).scrollTop()

，则所有内容都已修复

Firefox和IE JS滚动问题

1 个答案: