StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You've seen this example on Google Code's <a href="http://code.google.com/p/chromium/issues/detail?id=575" rel="noreferrer">issue page</a> and (only recently) on Stack Overflow's edit page.</p> <p>CMS's answer doesn't revert the positioning when you scroll back up. Here's the shamelessly stolen code from Stack Overflow:</p> <pre><code>function moveScroller() { var $anchor = $("#scroller-anchor"); var $scroller = $('#scroller'); var move = function() { var st = $(window).scrollTop(); var ot = $anchor.offset().top; if(st > ot) { $scroller.css({ position: "fixed", top: "0px" }); } else { $scroller.css({ position: "relative", top: "" }); } }; $(window).scroll(move); move(); } </code></pre> <pre><code><div id="sidebar" style="width:270px;"> <div id="scroller-anchor"></div> <div id="scroller" style="margin-top:10px; width:270px"> Scroller Scroller Scroller </div> </div> <script type="text/javascript"> $(function() { moveScroller(); }); </script> </code></pre> <p>And a simple <a href="http://fiddle.jshell.net/34df1mj7/show/light/" rel="noreferrer">live demo</a>.</p> <p>A nascent, script-free alternative is <code>position: sticky</code>, which is supported in Chrome, Firefox, and Safari. See the <a href="http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit" rel="noreferrer">article on HTML5Rocks</a> and <a href="http://html5-demos.appspot.com/static/css/sticky.html" rel="noreferrer">demo</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning" rel="noreferrer">Mozilla docs</a>.</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