javascript - ScrollTop 在 Firefox 中不起作用

Question

我真的很想安装一个由 Ciralism 命名为 Aerial 的 Tumblr 主题。问题是您在开始时看到的主框的 ScrollTop 动画在 Firefox 中不起作用。

这是 Preview和完整的 Code

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>

和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}
}

非常感谢您的回答! :)

Answer 1

您可以使用 $(window).scrollTop() 而不是 $('body').scrollTop()

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