JavaScript 未在 Firefox 中执行

Question

这个问题已经有答案了:

jQuery/Javascript: scrollTop Value in all browsers? (1 个回答)

已关闭 7 年前。

所以我有这个website最近刚刚作为“即将推出”网站推出。我已经在不同的设备上对其进行了测试，但意识到处理菜单+文本元素淡入淡出的 JavaScript 在 Firefox 上根本不起作用。不幸的是我没有收到任何错误日志。

这是js代码:

$(function(){
  window.onscroll = function(e) {handleScrollActions(e)};

  var $nav = $('header');
  var $logo = $('nav img');
  var $start = $('#start');
  var $deinesgleichen = $('#netzwerk');
  var $deinesgleichen_text = $('#netzwerk-promo .text-wrapper');
  var $dogaction = $('#dogaction');
  var $dogaction_text = $('#dogaction-promo .text-wrapper');
  var $barfgenerator = $('#barfgenerator');
  var $barfgenerator_text = $('#barfgenerator-promo .text-wrapper');
  var $new_text = $('#new-promo .promo-text');
  var $flying_dog = $('.flying-dog');
  var $newsletter = $('#newsletter');

  var $walker1 = $('.walker1');
  var $walker2 = $('.walker2');
  var $walker3 = $('.walker3');
  var $walker4 = $('.walker4');

  var $join = $('.join-now');
  $join.on("click", function(e){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: 0
    }, 1000);
  })
  window.addEventListener("hashchange", function(e){
    var hash = location.hash;
    var target = hash + "-promo";
    var to = $(target).offset().top == 0 ? 0 : $(target).offset().top - 140;
    if(window.innerWidth < 730){
      $('.mobile').slideToggle(300);
    }
    $('html, body').animate({
        scrollTop: to
    }, 1000);
    $('#init-arrow').hide();
  });

  function handleScrollActions(e){
    var scrollY = document.body.scrollTop;
    // console.log("Scroll Y" + scrollY);
    if(scrollY > 0){
      // $logo.attr('src', '/imgs/logo-fixed.png');
      $nav.addClass("fixed");
      // $('.video-section').css("margin-top", "42px");
    }
    if(scrollY <= 0){
      $logo.attr('src', '/imgs/logo-neu.png');
      $nav.removeClass("fixed");
      // $('.video-section').css("margin-top", "72px");
    }
    if(window.innerWidth <= 1060){
      // console.log("KLEINER ALS 1060");
      if(scrollY < 200){
        $start.addClass("active");
        $deinesgleichen.removeClass("active");
        $dogaction.removeClass("active");
        $barfgenerator.removeClass("active");
        $newsletter.removeClass("active");
        if( window.innerWidth > 1170 ){
          $('#init-arrow').show();
        }
      }
    }else{
      if(scrollY < 320){
        $start.addClass("active");
        $deinesgleichen.removeClass("active");
        $dogaction.removeClass("active");
        $barfgenerator.removeClass("active");
        $newsletter.removeClass("active");
        if( window.innerWidth > 1170 ){
          $('#init-arrow').show();
        }
      }
    }
    if( window.innerWidth <= 1170 ){
      var arrowY = 330;
    }else{
      var arrowY = 400;
    }
    if(scrollY > arrowY){
      $('#init-arrow').hide();
    }
    if( window.innerWidth <= 1060 ){
      var netzY = 200;
      var netzY2 = 520;
    }else if ( window.innerWidth <= 1170 ){
      var netzY = 321;
      var netzY2 = 720;
    }
    else{
      var netzY = 321;
      var netzY2 = 800;
    }
    if(scrollY >= netzY && scrollY <= netzY2){
      $('#init-arrow').hide();
      // location.hash != '#netzwerk' ? location.hash = '#netzwerk' : false;
      if(!$deinesgleichen_text.hasClass("animated")){
        $deinesgleichen_text.addClass("animated fadeIn text-wrapper-show");
      }

      $start.removeClass("active");
      $deinesgleichen.addClass("active");
      $dogaction.removeClass("active");
      $barfgenerator.removeClass("active");
      $newsletter.removeClass("active");
    }
    if( window.innerWidth <= 1060 ){
      var dactionY = 521;
      var dactionY2 = 900;
    }else if ( window.innerWidth <= 1170 ){
      var dactionY = 500;
      var dactionY2 = 1000;
    }
    else{
      var dactionY = 800;
      var dactionY2 = 1100;
    }
    if(scrollY >= dactionY && scrollY <= dactionY2){
      // location.hash != '#dogaction' ? location.hash = 'dogaction' : false;
      if(!$dogaction_text.hasClass("animated")){
        $dogaction_text.addClass("animated fadeIn text-wrapper-show");
      }

      $start.removeClass("active");
      $deinesgleichen.removeClass("active");
      $dogaction.addClass("active");
      $barfgenerator.removeClass("active");
      $newsletter.removeClass("active");
    }
    if( window.innerWidth <= 1060 ){
      var barfY = 911;
      var barfY2 = 1200;
    }else if ( window.innerWidth <= 1170 ){
      var barfY = 1101;
      var barfY2 = 1200;
    }
    else{
      var barfY = 1200;
      var barfY2 = 1674;
    }
    if(scrollY >= barfY && scrollY <= barfY2){
      // location.hash != '#barfgenerator' ? location.hash = '#barfgenerator' : false;
      if(!$barfgenerator_text.hasClass("animated")){
        $barfgenerator_text.addClass("animated fadeIn text-wrapper-show");
      }

      $start.removeClass("active");
      $deinesgleichen.removeClass("active");
      $dogaction.removeClass("active");
      $barfgenerator.addClass("active");
      $newsletter.removeClass("active");
    }
    if( window.innerWidth <= 1060 ){
      var lpromoY = 1201;
    }else if ( window.innerWidth <= 1170 ){
      var lpromoY = 1401;
    }
    else{
      var lpromoY = 1675;
    }
    if(scrollY >= lpromoY){
      // location.hash != '#new' ? location.hash = '#new' : false;
      if(!$new_text.hasClass("animated")){
        $new_text.addClass("animated slideInUp text-wrapper-show");
      }
      $flying_dog.addClass("animated slideInUp flying-dog-show floating");

      $start.removeClass("active");
      $deinesgleichen.removeClass("active");
      $dogaction.removeClass("active");
      $barfgenerator.removeClass("active");
      $newsletter.addClass("active");
      animateWalker3();
      animateWalker2();
      animateWalker1();
      animateWalker4();
    }
  }

  function animateWalker2(){
    $walker2.animate({right: window.innerWidth - 40}, 12000, function(){
      $walker2.css('transform','rotateY('+180+'deg)');
      $walker2.animate({left: 0}, 10000, function(){
        $walker2.css('transform','rotateY('+0+'deg)');
          animateWalker2();
      });
    });
  }
  function animateWalker1(){
    $walker1.animate({right: window.innerWidth - 80}, 13000, function(){
      $walker1.css('transform','rotateY('+180+'deg)');
      $walker1.animate({right: 0}, 10000, function(){
        $walker1.css('transform','rotateY('+0+'deg)');
          animateWalker1();
      });

    });
  }
  function animateWalker3(){
    $walker3.animate({left: window.innerWidth - 80}, 11000, function(){
      $walker3.css('transform','rotateY('+180+'deg)');
      $walker3.animate({left: 0}, 10000, function(){
        $walker3.css('transform','rotateY('+0+'deg)');
          animateWalker3();
      });

    });
  }
  function animateWalker4(){
    $walker4.animate({right: window.innerWidth - 40}, 9000, function(){
      $walker4.css('transform','rotateY('+180+'deg)');
      $walker4.animate({right: 0}, 10000, function(){
        $walker4.css('transform','rotateY('+0+'deg)');
          animateWalker4();
      });

    });
  }

  var top_login_button = document.querySelector('.promo-login-button');
  var login_wrap = document.querySelector('.login-wrap2');
  var darkbg = document.querySelector('.darkbg');

  top_login_button.addEventListener('click', function(e){
    e.preventDefault();
    darkbg.style.display = "block";
    login_wrap.style.display = "block";
    $('.login-wrap2').addClass("animated");
    $('.login-wrap2').addClass("fadeIn");
  });

  $('#closelogin').on("click", function(e){
    e.preventDefault();
    darkbg.style.display = "none";
    $('.login-wrap2').removeClass("fadeIn");
    $('.login-wrap2').addClass("fadeOut");
    setTimeout(function(){
      login_wrap.style.display = "none";
      $('.login-wrap2').removeClass("fadeOut");
    },200);
  });
  darkbg.addEventListener("click", function(e){
    e.preventDefault();
    darkbg.style.display = "none";
    $('.login-wrap2').removeClass("fadeIn");
    $('.login-wrap2').addClass("fadeOut");
    setTimeout(function(){
      login_wrap.style.display = "none";
      $('.login-wrap2').removeClass("fadeOut");
    },200);
  })
  var mobile_menu = $('.mobile-menu');
  mobile_menu.on("click", function(e){
    $('.mobile').slideToggle(300);
  });
  window.addEventListener("resize", function(e){
    // console.log(window.innerWidth);
    if(window.innerWidth > 730){
      document.querySelector('.mobile').style.display = "flex";
      // $('.mobile').style.display = "block";
    }else{
      document.querySelector('.mobile').style.display = "none";
    }

  });

  var vid = document.getElementById("bgvid");
  setInterval(function () {
    // console.log(vid.currentTime);
    if(vid.currentTime > 7){
      vid.currentTime = 0;
      // console.log("video reseted");
    }
  }, 1000);

  function hashOnce(e){
      var hash = location.hash;
      if(hash == ""){

      }else{
        var target = hash + "-promo";
        // $('.mobile').slideToggle(300);
        var to = $(target).offset().top == 0 ? 0 : $(target).offset().top - 140;
        $('html, body').animate({
            scrollTop: to
        }, 1000);
        $('#init-arrow').hide();
      }
  }
  hashOnce();

  if(localStorage.newsletter){
    $('#newsletter-signup div').remove();
    $('.success-newsletter').toggle();
  }

  var newsletter_signup = $('#newsletter-signup');
  newsletter_signup.on("submit", function(e){
    // console.log("EMIAL SIGNUP");
    e.preventDefault();
    var email = document.getElementById('email').value;
    $.post('/api/signupnewsletter', {data: email}, function(result){
      // console.log(result);
      // alert("passt");
      $('#newsletter-signup div').remove();
      $('.success-newsletter').toggle();
      localStorage.newsletter = true;
    });
  });
});

代码在网站上可见且未缩小，因此您可以自由检查。

我很感激任何解决方案和提示!感谢您的帮助。

Answer 1

Firefox 不使用 document.body.scrollTop - 它始终为 0。

您应该使用window.scrollY。

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Browser_compatibility