我真的想安装一个名为Aerial by Ciralism的Tumblr主题。问题是你在开始时看到的主框的ScrollTop动画在Firefox中不起作用。
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}
}
我非常感谢答案! :)
答案 0 :(得分:0)
您可以使用$(window).scrollTop()而不是$(&#39; body&#39;)。scrollTop()
OVERALL