2012-11-06 27 views
0

博客:http://mattdomchristom.tumblr.com如何停止導航欄滾動我的帖子?

正如您所看到的,當您向下滾動時,頂部的導航欄會出現,非常煩人。我怎樣才能讓它留在頁面的頂部?

這是我的HTML:

<head> 

<!--Default Variables--> 
<!--Colors--> 
<meta name="color:Background" content="#000"/> 
<meta name="color:Text" content="#fff"/> 
<meta name="color:Post Title" content="#1C1C1C"/> 
<meta name="color:Link" content="#8B7D7B"/> 
<meta name="color:Link Hover" content="#d8d8d8"/> 
<meta name="color:Blog Title" content="#8b0000"/> 
<meta name="color:Links Text" content="#e7e7e7"/> 
<meta name="color:Links Hover" content="#fff"/> 
<meta name="color:Ask Background" content="#838b8b"/> 

<!--Images--> 
<meta name="image:Background" content""/> 
<meta name="image:Sidebar" content=""/> 

<!--Options--> 
<meta name="if:Infinite Scrolling" content=""/> 
<meta name="if:Pagination" content=""/> 
<meta name="if:Glitterati Cursor" content=""/> 
<meta name="if:Tiny Scrollbar" content=""/> 
<meta name="if:Box shadows" content=""/> 
<meta name="if:Ask" content=""/> 
<meta name="if:Archive" content=""/> 

<meta name= "if:Link 1" content="link1"/> 
<meta name= "if:Link 2" content="link2"/> 
<meta name= "if:Link 3" content="link3"/> 
<meta name= "if:Link 4" content="link4"/> 


<!--Links--> 
<meta name="text:Link 1 URL" content=""/> 
<meta name="text:Link 1 name" content=""/> 
<meta name="text:Link 2 URL" content=""/> 
<meta name="text:Link 2 name" content=""/> 
<meta name="text:Link 3 URL" content=""/> 
<meta name="text:Link 3 name" content=""/> 
<meta name="text:Link 4 URL" content=""/> 
<meta name="text:Link 4 name" content=""/> 

{block:Description} 
<meta name="description" content="{MetaDescription}" />{/block:Description} 
<title> 
{block:PostSummary} 
{PostSummary} - {/block:PostSummary}{Title}</title> 

{block:ifinfinitescrolling}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescrolling} 

</style> 

<style type="text/css"> 

{block:ifGlitteraticursor} 
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_m10gu8MJ7Z1r869vr.gif), progress;}{/block:ifGlitteraticursor} 


{block:iftinyscrollbar} 
::-webkit-scrollbar {width: 8px; height: 9px; background :#fff; } 
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 0ex; border: 0px #D4D8DB;} 
{/block:iftinyscrollbar} 

body{ 
background-color: {color:Background}; 
background-image: url({image:Background}); 
background-attachment: fixed; 
background-repeat: repeat; 
background-position: center; 
font-family: helvetica; 
font-size: 14px; 
line-height: 14px; 
letter -spacing:0px; 
color:{color:Text}; 
text-align:justify; 
} 

a:link, a:active, a:visited{ 
color: {color:Link}; 
text-decoration:none; 
} 
a:hover{ 
color: {color:Link Hover}; 
text-decoration:underline; 
} 

#container { 
margin:auto; 
position:right; 
width:1200px; 
color: {color:Title}; 
_margin-left:10%; 
} 

#content { 
float:center; 
width:508px; 
padding: 2px; 
margin-top: 25px; 
margin-left: 300px; 
background: clear; 
} 

#entry { 
margin-top:15px; 
padding:3px; 
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png); 
{block:ifboxshadows}; 
box-shadow: 0px 5px 20px rgba(0,0,0,0.35); 
{/block:ifboxshadows} 
{block:ifboxborders} 
border: 1px solid black; 
{/block:ifboxborders} 
} 

#entry img{ 
{block:IndexPage}max-width:500px;{/block:IndexPage} 
} 


#side { 
position:fixed !important; 
width: 220px; 
height: auto; 
margin-top: 40px; 
margin-left: 500px ; 
padding: 2px ; 
font-size: 13px; 
text-transform: lowercase; 
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png); 
{block:ifboxshadows}; 
box-shadow: 0px 5px 20px rgba(0,0,0,0.35); 
{/block:ifboxshadows} 
} 

#side2 { 
position:fixed !important; 
width: 753px; 
height: 30px; 
text-transform: uppercase; 
font-size: 13px; 
background-color:black; 
opacity: .8; 
margin-top: -20px; 
margin-left: -30px ; 
padding: 2px ; 
} 

.navigate a{ 
color: {color:Links Text}; 
display:block; 
width: 85px; 
height: 15px; 
text-align: center; 
padding-top: 3px; 
padding-left: 3px; 
margin-left: 0px; 
margin-top: 2px; 
position: relative; 
text-align: center; 
z-index: 999; 
font-family: helvetica; 
font-size: 14px; 
display: inline-block; 
} 
.navigate a:hover{ 
color: {color:Links Hover}; 
text-decoration: none; 
} 

.permalink{ 
display: block; 
padding:1px; 
margin-top:0px; 
margin-bottom:4px; 
font-size: 11px; 
text-align: center; 
text-transform: uppercase; 
} 

.blogtitle{ 
text-transform: uppercase; 
font-size: 22px; 
line-height: 22px; 
color: {color:Blog Title}; 
} 

.posttitle{ 
font-size: 17px; 
line-height: 12px; 
text-transform: uppercase; 
color: {color:Post Title}; 
letter-spacing: 1; 
font-weight: none; 
} 


blockquote{ 
padding:0px 0px 2px 5px; 
margin:0px 0px 2px 1px; 
border-left: 1px solid {color:Text};} 
blockquote p, ul{margin:0px; padding:0px; 
} 

.chat .line{ 
margin: 0 0 0px; 
padding: 2px; 
} 
.chat .line.odd{ 
} 

.label {font-weight:bold; color:{color:text}} 

.question { 
color:{color:Text}; 
font-size: 10px; 
font-weight: normal; 
line-height:95%; 
background: {color:Ask Background}; 
margin: 0 0 10px 0; 
padding: 10px 15px; 
position: relative; 
-moz-border-radius:5px; -webkit-border-radius:5px; 
} 

.questionarrow { 
width: 13px; 
height: 7px; 
font-size:30px; 
position: absolute; 
color:{color:Ask Background}; 
bottom: -3.5px; 
left: 260px; 
} 


.asker {width:500px; text-align:left; color:{color:Text};font-family: silkscreen;font-size: 9px;} 
.asker a {color:{color:Text};} 
.asker img {float:left; margin-left:220px; vertical-align:top; margin-right:3px; max-height:15px;} 




a img{border: 0px;} 

.p { padding-top: 5px; } 
.ol, ul { margin-left: 10px; padding: 5px; } 
.ul { list-style-type: square; } 

.albumart { margin-bottom: 0px; } 
.albumart img, .audio embed { width: 60px; } 

.video embed, .post div.video object {width:250px !important; height:187px !important;} 

.notes img{width:10px; position:left; top:3px;} 

.tags { 
width:auto; 
solid {color:Links}; 
font-size: 10px; 
text-transform:uppercase; 
color:{color:link}; 
padding:2px; 
line-height:1; 
margin-left:1px; 
} 

.tags a:hover{ 
color: {color:Link Hover}; 
text-decoration:underline; 
} 

#pages { 
float: center; 
width: 753px; 
height: 22px; 
text-transform: uppercase; 
font-size: 14px; 
color: {color:Link}; 
background-color: white; 
opacity: .6; 
margin-top: 10px; 
margin-left: 300px ; 
padding: 2px; 
padding-top: 6px; 
} 

{font-size: 100%;} 

{CustomCSS} 
</style> 

<link rel="shortcut icon" href="{Favicon}"> 

<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" /> 

{block:ifinfinitescrolling}<style>#toTop {display:none;text-decoration:none;position:fixed;bottom:20px;right:20px;overflow:hidden;width:30px;height:40px;border:none;text-indent:-999px;background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left top;z-index:3000;}#toTopHover {background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left -40px; 
width:30px;height:40px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);} 
#toTop:active, #toTop:focus {outline:none;}#toTop:active, #toTop:focus {outline:none;}</style> 

<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script> 
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script> 
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$().UItoTop({ easingType: 'easeOutQuart' }); 
}); 
</script>{/block:ifinfinitescrolling} 


</head> 
<body> 
<div id="container"> 
<div id="content"> 
<div id="side2"> 

<div class="navigate"> 

<a href="/" >home</a> 
{block:ifAsk} 
<a href="/ask" >message</a> 
{/block:ifAsk} 

{block:iflink1} 
<a href="{text:Link 1 URL}">{text:Link 1 name}</a> 
{/block:iflink1} 
{block:iflink2} 
<a href="{text:Link 2 URL}">{text:Link 2 name}</a> 
{/block:iflink2} 
{block:iflink3} 
<a href="{text:Link 3 URL}">{text:Link 3 name}</a> 
{/block:iflink3} 
{block:iflink4} 
<a href="{text:Link 4 URL}">{text:Link 4 name}</a> 
{/block:iflink4} 
<a href="/archive" >archive</a> 
<a href="http://sociallyawkwardgiraffe.tumblr.com/" >Theme</a> 
</div> 
</div> 
</center> 

<div id="side"> 

<center> 
<div class="blogtitle"><a href="/">{Title}</a></div> 
</center> 
<br> 

<a href="/"><img src="{image:sidebar}" width=220px></a> 


{Description} 

</div> 

</div> 

</div> 



<div id="content"> 
{block:Posts} 
<div id="entry"> 

<center> 
{block:IndexPage} 
<div class="permalink" style="letter-spacing:1px;"><l><a href="{Permalink}"> {Month} {DayOfMonth}, {Year} • {NoteCountWithLabel}</a><a href="{ReblogURL}" target="_blank" class="details"> • Reblog</a></l> 
</div> 
{/block:IndexPage} 
</center> 

{block:Text} 
{block:Title}<span class="posttitle">{Title}</span> 
{/block:Title}<span class="entrytext">{Body}</span> 
{/block:text} 

{block:Link} 
<a href="{URL}" class="posttitle">{Name}</a>{block:Description}{Description}{/block:Description} 
{/block:link} 

{block:Photo} 
{LinkOpenTag} 
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px 
{LinkCloseTag} 
{block:Caption}{Caption}{/block:Caption} 
{/block:Photo} 

{block:Photoset}<center>{Photoset-500}</center> 
{block:Caption}{Caption}{/block:Caption} 
{/block:Photoset} 

{block:Quote} 
<span class="title">{Quote}</span> 
{block:Source}<i> - {Source}</i>{/block:Source}<br> 
{block:Caption}{Caption}{/block:Caption} 
{/block:Quote} 


{block:Chat} 
{block:title}<div id="posttitle"><center>{Title}<br></center></div> 
{/block:title}<div class="chat"> 
{block:Lines}<div class="chat"><div class="line {Alt}"><div class="{Alt} user_{UserNumber}"> 
{block:Label}<span class="label"><b>{Label}</b></span> 
{/block:Label}{Line}</div> 
</div></div>{/block:Lines}</div>{/block:Chat} 

{block:Audio} 
{block:albumart}<div class="albumart"><img src="{albumarturl}" align="left"></div> 
{/block:albumart}<div style="width: 310px; height: 20px;"> 
{AudioPlayerblack}</div><BR>{block:TrackName}<span><strong>Title</strong>: 
{TrackName}</span>{/block:TrackName}<br> 
{block:Artist}<span><strong>Artist:</strong> 
{Artist}</span>{/block:Artist}<br> 
{/block:Audio} 

{block:Video}<center>{Video-500}<BR> 
</center>{block:Caption}{Caption}{/block:Caption}{/block:Video} 

{block:Answer} 
<div class="question"> 
<div class="questionarrow">▼</div> 
{Question} 
</div> 
<div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div> 
<div class="answer">{Answer}</div> 
{/block:answer} 

{block:HasTags}<div class="tags"> tags: {block:Tags}<a href="{TagURL}" target="_blank">#{Tag} </a>{/block:Tags}</div>{/block:HasTags} 
</center> 

{block:PostNotes}{PostNotes} 
{/block:PostNotes}</div>{/block:Posts} 

</center> 
</div> 
<div id="pages"> 
{block:ifpagination} 
<center> 
{block:PreviousPage}<a href="{PreviousPage}" title="newer">&larr;</a>{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}<a href="{NextPage}" title="older">&rarr;</a> 
{/block:NextPage} 

{/block:ifpagination} 
<center> 
</center> 
</div> 

</div></div> 
</div> 
</body> 
</html> 

回答

0

在您的自定義屏幕自定義CSS框,輸入以下內容:

#side2 { 
    position: relative!important; 
}