Question

我很困惑，我应该如何让我的帖子在滚动时消失...我希望我的帖子就像这样http://yukoki.tumblr.com/page/4（所以一旦你滚动，它会像他的黑色标题一样消失例）。这是我的主题http://macaiylaedwards.tumblr.com/我基本上使用图像作为我的标题，如果这是问题，但必须有一个解决方案。尝试再次围绕帖子，但它没有工作。我也会在这里留下我的编码。谢谢。

<!DOCTYPE html>
<html>
<html lang="en">
<head>

<title></title>
<link rel="shortcut icon" href="{Favicon} />"


<meta name="color:Sidebar Background" content="#000000" />
<meta name="color:Background" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">





<style type="text/css">

a:link, a:active, a:visited{
color: {color:Link};
color:#000000;
}


body{
color:#000000;
background-color:{color:bg};
background-image:url({image:background});
Background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
margin:0;
word-wrap: break-word;
}

pre { 
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

.desc{
position:fixed;
margin-top:280px;
margin-left:860px;
width:400px;
height:300px;
font-family:0px;
letter-spacing:1px;
}



.nav{
position:fixed;
margin-top:300px;
margin-left:880px;
}



.pt{
width:500px;
margin-top:400px;
margin-left:700px;
background-color:#fff;
position:absolute;
padding:5px;
}

.pt2{
padding:10px;
background-color:#fff;
width:500px;
float:left;
margin:2px;
background-color:transparent;
}


.cutebox{
position:auto;
width:auto;
border:1px solid #292c34;
}










</style>



</head>
<body>
{block:More}<a href="{Permalink}">READ MORE</a>{/block:More}

<div class="desc">
{description} 
</div>



<div style="position: fixed;width: 100%;z-index: 10;">
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/world_zpswu8twdm2.png" height=650 style="position:fixed;bottom:600px;left:750px;z-index:999"/>
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/888_zpsopwexxl4.png" height=210 style="position:fixed;bottom:720px;left:550px;z-index:999"/>
</div>


<select style="width: 200px; border: 0px solid; padding: 3px; color: #292c34; background-color: #f1f1f1;  font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; position:fixed;bottom:740px;left:880px;z-index:999" onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'> 

<option>Explore</option> 
<option value="http://www.tumblr.com/home">Home</option>
<option value="http://www.tumblr.com/about">About</option>
<option value="http://www.tumblr.com/home/photography">Photography</option>
<option value="http://www.tumblr.com/contact">Contact</option>
<option value="http://www.tumblr.com/ask">Ask me</option>
</select>








<div class="pt">
{block:posts}
<div class="pt2"



{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
<div class="cutebox">
{block:Caption}<center>{Caption}</center>{/block:Caption}
</div>
{/block:Photo}
 



</div>
{/block:posts}
</div> 







</body>
</html>

Answer 1

这是使用您链接到的tumblr中的一些代码的基本示例。

模板在主题顶部有一个div，其id为top：

<div id="top"></div>

这个div有一些css属性，重要的是position:fixed（这意味着它在滚动时总是在视口中。

#top {
    background-image: url(http://38.media.tumblr.com/tumblr_m8nhk3w96X1r9g6hvo2_250.gif);
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    position: fixed;
    z-index: 1001;
}

使用固定定位时必须指定宽度，因此在这种情况下将其设置为100％。该项目也有一个高度，所以在这个例子中，我添加了相同数量的填充到下一个元素作为顶部div的高度。否则，下一个元素将隐藏在固定标题下方。

jsfiddle：http://jsfiddle.net/lharby/6Lbtsfwx/

tumblr：如何让我的帖子在一定范围内停止？

1 个答案: