StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It's not possible to change position from fixed to absolute in pure CSS like you want, so I used some javascript to do so. <a href="http://jsfiddle.net/XwzJs/4/" rel="nofollow noreferrer"><strong>Demo</strong></a></p> <pre><code>function followTo(elem, pos) { var element = document.getElementById(elem); window.onscroll = function(e){ var disFromTop = document.all? iebody.scrollTop : pageYOffset; if (disFromTop > pos) { element.style.position = 'absolute'; element.style.top = pos + 'px'; } else { element.style.position = 'fixed'; element.style.top = 0; } }; }; followTo("nav", 100); </code></pre> <p>It even includes an IE fix pulled from <a href="https://stackoverflow.com/questions/1896718/getting-distance-of-scroll">this SO post</a> to get the correct scroll position</p> <p><a href="http://jsfiddle.net/XwzJs/3/" rel="nofollow noreferrer"><strong>Here is the jQuery version</strong></a>, taken from <a href="https://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point">this SO post</a></p> <p><strong>EDIT</strong></p> <p>As pointed out by zanona, I did not include the feature where the navigation appears if you scroll up from a place further down in the page. As a result, I create a new technique that uses a <code>setInterval</code></p> <pre><code>var last = 0, // The last read top value delay = 150, // The delay for the setInterval threshold = 30; // The max scroll distance before showing/hiding the nav //I always set a variable to my setIntervals in case I want to stop them later on var navMovement = setInterval(function() { var nav = document.getElementById('nav'), // Gets nav object pageVertOffset = document.all? iebody.scrollTop : pageYOffset; // Happens if the difference in scroll is below the negative threshold if(pageVertOffset - last < -threshold) { nav.style.top = "0px"; // Put the nav at the top of the window } // Happens if the difference in scroll is above the threshold else if(pageVertOffset - last > threshold){ nav.style.top = - nav.offsetHeight + "px"; // Hides the navigation } last = pageVertOffset; // Updates the previous scroll value }, delay); // Runs every `delay` amount </code></pre> <p><a href="http://jsfiddle.net/XwzJs/13/" rel="nofollow noreferrer"><strong>Javascript version</strong></a>, or if you prefer, <a href="http://jsfiddle.net/XwzJs/11/" rel="nofollow noreferrer"><strong>jQuery version</strong></a></p> <p>I thought I recreated the site pretty well (but it's better because mine has a kitten, haha)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload