javascript - tumblr:如何让我的帖子停在某个边缘？-6ren

javascript - tumblr:如何让我的帖子停在某个边缘？

转载作者：行者123 更新时间：2023-11-28 06:59:57

我很困惑我应该如何让我的帖子在滚动时消失...我希望我的帖子像这样 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>

最佳答案

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

模板在主题顶部有一个id为top的div:

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

这个 div 具有某些 css 属性，重要的是 position:fixed(这意味着滚动时它始终在视口(viewport)中。

#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/

关于javascript - tumblr:如何让我的帖子停在某个边缘？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33295239/