scrollTop() funktioniert nicht immer

Question

Manchmal, wenn ich meine website laden kann ich nicht nach unten scrollen. Das passiert ziemlich selten, aber ich würde gerne verstehen, warum es manchmal passiert. Die Idee ist, dass wenn Sie nach unten scrollen, der obere Teil der Webseite ausgeblendet wird und wenn Sie zurück scrollen, wird der untere Teil der Webseite ausgeblendet. Ich weiß, dass dies wahrscheinlich unnötig ist, weshalb ich daran arbeite, es neu zu gestalten. Aber im Moment hatte ich gehofft, ich könnte mich schnell daran machen.

Hier ist die Javascript für die Homepage ist:

  $('html').addClass('jsEnabled'); 
      $(function(){ 
      $('#particles-js').hide(0).delay(1000).fadeIn(400); 
      $('header').hide(0).delay(1000).fadeIn(300); 
      $('#intro1').hide(0).delay(1300).fadeIn(300); 
      $('#intro2').hide(0).delay(1800).fadeIn(300); 
      $('#down').hide(0).delay(2000).fadeIn(300); 
      $('#arrow').delay(2200).show('slide',{direction:'up'},400); 


      /// Scroll down 
      $(window).scroll(function(){ 
       $('#intro').css("opacity",1-$(window).scrollTop()/300); 
      }); 
      $(window).scroll(function(){ 
       $('#arrow').css("opacity",1-$(window).scrollTop()/100); 
      }); 
      $(window).scroll(function(){ 
       if($(this).scrollTop()>50){ 
        $('#case-studies,#connect').fadeIn(); 
       } else { 
        $('#case-studies,#connect').fadeOut(); 
       } 
      /// Scroll back to top 
      $("a[href='#case-studies']").click(function() { 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 
      return false; 
       }); 
      }); 
      $("body").css("height",window.outerHeight + 200 + "px");  

      $(window).on('resize',function(){ /// for resize 
       $('#intro').css('margin-top', function() { 
       return ($(window).height() - $(this).height())/3 
      }); 
      }).resize(); 
      /// Fadeout on page load 
      $("a.transition").click(function(event){ 
       event.preventDefault(); 
       linkLocation = this.href; 
       $("body").fadeOut(1000,redirectPage); 
      }); 

      function redirectPage() { 
       window.location = linkLocation; 
      } 

      $('#back-to-middle').on('click', function (e) { 
        e.preventDefault(); 
        $('html,body').animate({ 
         scrollTop: 600 
        }); 
       }); 




     }); 

Answer 1

EDIT, einfach Ihre ganze ExternalFile.js mit diesem

$('html').addClass('jsEnabled'), 
$(function() { 
    function n() { 
    window.location = linkLocation 
    } 
    $('#particles-js').hide(0).delay(1000).fadeIn(400), 
    $('header').hide(0).delay(1000).fadeIn(300), 
    $('#intro1').hide(0).delay(1300).fadeIn(300), 
    $('#intro2').hide(0).delay(1800).fadeIn(300), 
    $('#down').hide(0).delay(2000).fadeIn(300), 
    $('#arrow').delay(2200).show('slide', { 
    direction: 'up' 
    }, 400), 

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); 
    // you must put a condition so the value of 
    //opacity remain between 0 and 1 
    // when viewing you website source code 
    //from "Mozilla DOM Inspector" or any other dev tools 
    // you can see the the opacity is 
    // between -6 and 6 witch are not valid value for opacity property 
    // so the arrow isn't shown 
    if (scrollTop <= 300) { 
    $('#intro').css('opacity', 1 - scrollTop/300); 
    } 

    // same for here 
    if (scrollTop <= 150) { 
    $('#arrow').css('opacity', scrollTop/150); 
    // "scrollTop/150" NOT "1 - ScrollTop/150" witch 
    // will produce the opposite of what you want 
    } 

    // You have to put the value of fadeIn to 3 seconds 
    // so the user can notice the effect 
    //fadeIn(3000) 

    if (scrollTop > 50) { 
    $('#case-studies,#connect').fadeIn(3000); 
    } else { 
    $('#case-studies,#connect').fadeOut(); 
    } 

}), 
    $('body').css('height', window.outerHeight + 200 + 'px'), 
    $(window).on('resize', function() { 
    $('#intro').css('margin-top', function() { 
     return ($(window).height() - $(this).height())/3 
    }) 
    }).resize(), 
    $('a.transition').click(function (o) { 
    o.preventDefault(), 
    linkLocation = this.href, 
    $('body').fadeOut(1000, n) 
    }), 
    $('#back-to-middle').on('click', function (n) { 
    n.preventDefault(), 
    $('html,body').animate({ 
     scrollTop: 600 
    }) 
    }) 
});