2015-10-23 98 views
0

我很困惑,我應該如何讓我的帖子在滾動時消失......我想我的帖子是這樣的http://yukoki.tumblr.com/page/4(所以一旦你滾動,它就像他黑色的頭部標題消失)。這是我的主題http://macaiylaedwards.tumblr.com/我基本上使用圖像作爲我的標題,如果這是問題,但必須有一個解決方案。試圖製作另一個環繞帖子,但它沒有工作。我也會在這裏留下我的代碼..謝謝。tumblr:如何讓我的帖子停在某個頁邊?

<!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>

回答

0

下面是使用一些來自您鏈接到tumblr代碼的一個基本的例子。

模板具有在主題的頂部與頂部的ID的DIV:

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

相關問題