StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's one method:</p> <h1><a href="http://jsfiddle.net/f4dhy/2/" rel="nofollow">Live demo</a></h1> <p>Javascript:</p> <pre><code>$(window).scroll(function() { if ($(window).scrollTop() >= 200) { screenWidth = $(window).width(); containerWidth = $("#menu_runner").outerWidth(true); pos = screenWidth - containerWidth; $("#floatbar").css({ position: 'fixed', left: pos, top: '0' }); } else { $("#floatbar").css({ position: 'absolute', left: '0', top: '200px' }); } }); </code></pre> <p>The idea is get the screen's width, the menu container's width, and from that we get figure out how to position the left edge of the menu so that it lines up with the container.</p> <p>In your css, add:</p> <pre><code>body{ padding: 0; margin: 0; } </code></pre> <p>which fixes the slightly off positioned problem you'd see without it due to the default margin set by browsers.</p> <p>You might see the menu kinda bounce into position when you scroll it to the top, which is unfortunate but hopefully not too much of a problem.</p> <p>This doesn't work in IE6 because of the position:fixed being used. You'll have to search for a solution to that. I'm not too familiar with what the accepted workaround is (but a <a href="http://tagsoup.com/cookbook/css/fixed/" rel="nofollow">quick</a> google <a href="http://www.cssplay.co.uk/layouts/fixed.html" rel="nofollow">search</a> shows a few hacks that might work)</p> <p>I'm curious though, any reason you want to do it this way? Why have the menu scroll with the screen and then stop at the top? Why not just fix it to one place on the screen from the start, something like <a href="http://jsfiddle.net/H66sh/" rel="nofollow">this</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