View Full Version : Tumblr Javascript on Refresh

03-25-2011, 05:53 AM
Hi all,

I have a question (probably simple, as I'm a novice) for you. I'm finishing a tumblr theme in which I have my menu stick to the top of the window as I scroll down, and unstick when I scroll back up. It's working fine, except that if I scroll down and then refresh the page, the menu goes back to the middle of the page. Hard to explain, but you can see for yourself on my test page (http://pacificrimtheme.tumblr.com/?). Is there any way to make the menu stay on top through a refresh? My complete code is included below (apologies for its ugliness). Thanks in advance.



<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="{MetaDescription}" />

<meta name="color:Highlight" content="#ff0" />
<meta name="if:Show Portrait" content="0"/>
<meta name="if:Show RSS Link" content="0"/>
<meta name="if:Small Permalink" content="0"/>
<meta name="font:Title" content="Futura"/>
<meta name="font:Body" content="Courier New"/>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
$el = $('.fixed');
if ($(this).scrollTop() > 320 && $el.css('position') != 'fixed'){
$('.fixed').css({'position': 'fixed', 'top': '0px'});
if ($(this).scrollTop() < 320 && $el.css('position') == 'fixed'){
$('.fixed').css({'position': 'relative', 'top': ''});

<style type="text/css">

body {
background: #fff;
margin-left: auto;
margin-right: auto;
width: 600px;
font: 13px {font:Body};
color: #000;

body a { color: #000; }

body a:hover {
background-color: {color:Highlight};

#desc { font-size: 12px; }

.fixed {
background-color: #fff;
top: 310;

#footer {
text-align: center;
font-size: 11px;
color: #ccc;
padding-top: 20px;
padding-bottom: 20px;

#footer a { color: #ccc; }

#header {
top: 140px;
top: 100px;
text-align: center;
position: relative;

#menu {
width: 600px;
border-bottom: 1px dashed;
background: #fff;
font-size: 11px;
text-align: center;
position: absolute;

#menu a { text-decoration: none; }

#newer {
float: right;
margin-left: -60px;

#notes {
color: #ccc;
border-bottom: 1px dashed;
margin-bottom: 30px;
margin-top: 20px;
margin-bottom: 45px;
text-align: center;
font-size: 11px;

#notes a {
color: #ccc;
text-decoration: none;

#notes a:hover, #footer a:hover { color: #000; }

#notes_page { margin-top: 30px; }

#notes_page ol {
list-style: none;
padding: 0px;
margin: 0px;
width: 600px;

#notes_page li {
padding: 2px;
background-color: #fff;
margin-top: 2px;

#older {
float: left;
margin-right: -60px;

#photo, #video { text-align: center; }
#photo img { max-width: 600px; }

#post_container {
margin-top: 340px;
margin-top: 260px;

#quote { font-size: 18px; }

#title a {
font: 36px {font:Title};
font-style: italic;
letter-spacing: 10px;
text-decoration: none;





<div class="fixed"><p><div id="menu">

<div id="older">
<a href="{NextPage}">← Older</a>

<a href="/">Home</a> /
<a href="/archive">Archive</a>
{block:IfShowRSSLink} /
<a href="{RSS}">RSS</a>
{block:Pages} / <a href="{URL}">{Label}</a>{/block:Pages}
{block:AskEnabled} / <a href="/ask">Ask</a>{/block:AskEnabled}
{block:SubmissionsEnabled} / <a href="/submit">Submit</a>{/block:SubmissionsEnabled}

<div id="newer">
<a href="{PreviousPage}">Newer →</a>


<div id="header">
{block:IfShowPortrait}<img src={PortraitURL-64}>{/block:IfShowPortrait}<p>
<div id="title"><a href="/">{Title}</a></div><br>
{block:Description}<div id="desc">{description}</div>{/block:Description}<p>


<div id="post_container">

{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}

<div id="photo">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>

<div id="caption">{block:Caption}{Caption}{/block:Caption}</div>

<div id="quote">"{Quote}"</div><p>
{block:Source} ~ {Source}{/block:Source}

<a href="{URL}" class="link" {Target}>{Name}</a>

{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}

<ul class="chat">
<li class="{Alt} user_{UserNumber}">
<span class="label">{Label}</span>


<div id="video">{Video-500}</div>


<h3>{Asker} asked: {Question}</h3>

<div id="notes">
{block:IfSmallPermalink}<a href="{Permalink}">&crarr;</a>{/block:IfSmallPermalink}

{block:Date}<a href={Permalink}>{DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}{/block:IfShowDate} {block:RebloggedFrom} / Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
{block:HasTags} / {block:Tags}<a href={TagUrl}>{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}



<div id="notes_page">

<div id="footer">
Theme by <a href="http://toxicjungle.co">Jon</a>.