ScrollTop在Firefox中不起作用

Question

I would really like to install a Tumblr theme named Aerial by Ciralism. The problem is that the ScrollTop animation of the main box which you see at the beginning doesn't work in Firefox.

Here's the Preview and the full Code

The Jquery:

<script type="text/javascript">

//when the DOM has loaded
$(document).ready(function() {

    //attach some code to the scroll event of the window object
    //or whatever element(s) see http://docs.jquery.com/Selectors
    $(window).scroll(function () {
          var height = $('body').height();
          var scrollTop = $('body').scrollTop();
          var opacity = 1;


          // do some math here, by placing some condition or formula
          if(scrollTop > $('body').height()) {
              opacity = 0;
          }


          //set the opacity of div id="someDivId"
          $('.top_image').css('opacity', opacity);
    });
});
</script>



<script type="text/javascript">

//when the DOM has loaded
$(document).ready(function() {

    //attach some code to the scroll event of the window object
    //or whatever element(s) see http://docs.jquery.com/Selectors
    $(window).scroll(function () {
          var height = $('body').height();
          var scrollTop = $('body').scrollTop();
          var opacity = 0;


          // do some math here, by placing some condition or formula
          if(scrollTop > 120) {
              opacity = 1;
          }


          //set the opacity of div id="someDivId"
          $('.button').css('opacity', opacity);
    });
});
</script>


<script type="text/javascript">

$(document).ready(function() {

    $(window).scroll(function () {
          var scrollTop = $('body').scrollTop();
         $('#top').css("margin-left","-250px");
         $('#top').css("top", "50%");
         $('#top').css("margin-top","-150px");
         $('#top').css("width","500px");
          var height = 300;

          if(scrollTop > 50) {
              $('#top').css("margin-left", "-350px");
              $("#top").css("width","700")
              $('#top').css("top","0%");
              $('#top').css("margin-top","0px");
              height = 80;
          }

          $('#top').css('width', width);
          $('#top').css('height',height);

    });
});
</script>

and the css

#top {
position:fixed;
z-index:99999;
top:50%;
left:50%;
width:500px;
padding-bottom:15px;
opacity:1;
margin-top:-150px;
margin-left:-250px;
background-color:#fff;
-webkit-transition-duration:900ms;
-o-transition-duration:900ms;
-moz-transition-duration:900ms;
-ms-transition-duration:900ms;
}

.top_image {
width:500px;
height:250px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-110px;
background-color:transparent;
position:fixed;
display:inline-block;
-webkit-transition-duration:900ms;
-o-transition-duration:900ms;
-moz-transition-duration:900ms;
-ms-transition-duration:900ms;
}

.headerimg_left {
    width:250px;
    height:250px;
    display:inline-block;
    float:left;
}

.headerimg_right {
    width:250px;
    height:250px;
    display:inline-block;
    float:right;
}

.title {
font-family: 'Lato', sans-serif;
font-weight:900;
margin-top:10px;
text-align:left;
padding-left:5px;
display:inline-block;
font-size:25px;
color:#000;
letter-spacing:4px;
text-transform:uppercase;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
}

.links {
margin-top:10px;
position:absolute;
right:0px;
display:inline-block;
z-index:999999;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
}

.links a {
color:#000;
font-weight:bold;
background-color:#fff;
width:100px;
height:10px;
text-align:center;
padding:10px 0px 0px 0px;
display:inline-block;
text-transform:uppercase;
font-size:9px;
letter-spacing:5px;
-webkit-transition-duration:400ms;
-moz-transition-duration:400ms;
-o-transition-duration:400ms;
-ms-transition-duration:400ms;
}

.links a:hover {
color:#eee;
}

.desc {
background-color:#fff;
padding:20px 15px;
line-height:17px;
letter-spacing:1px;
font-weight:lighter;
font-family:'Lato';
text-align:center;
width:200px;
position:absolute;
left:50%;
margin-left:-105px;
height:120px;
margin-top:50px;
{block:ifOnlyShowDescOnHover}
opacity:0;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
-ms-transition-duration:500ms;
{/block:ifOnlyShowDescOnHover}
}

I would appreciate an answer so much! :)

Answer 1

您可以使用$（window）.scrollTop（）代替$（'body'）。scrollTop（）

var scrollTop = $(window).scrollTop();