Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I think I've done what you're talking about before. Is this what you're looking to do? </p> <p><a href="http://dropthebit.com/demos/stickyfloat/stickyfloat.html" rel="nofollow">http://dropthebit.com/demos/stickyfloat/stickyfloat.html</a></p> <p>Looks like the code is now at: <a href="https://gist.github.com/chaupt/728487" rel="nofollow">https://gist.github.com/chaupt/728487</a></p> <p>I had to modify this slightly, but the sidebar will remain fixed until you scroll and the top of the window touches the top of the element you want to scroll with the page.</p> <p>Edit: </p> <p>Ok, I think I see what you mean. Try this:</p> <p>CSS:</p> <pre><code> #header {background-color:#0000ff; color:#fff; height:50px; text-align:center; width:100%; z-index:10; } #wrapper {margin:0; padding:0; position:relative; z-index:1; } #menu {background-color:#000000; clear:both; color:#fff; height:25px; padding:5px; position:relative; width:100%; z-index:10; } #sidebar {background-color:#ff0000; color:#fff; float:left; margin:35px 0 0 0; position:relative; width:6em; } #content {background-color:#ff00ff; color:#fff; margin:0 0 0 6em; padding:35px 0 0 .5em; } p {margin:0 0 .5em 0; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="wrapper"&gt; &lt;div id="menu"&gt;Menu&lt;/div&gt; &lt;div id="sidebar"&gt; &lt;ul&gt; &lt;li&gt;Item1&lt;/li&gt; &lt;li&gt;Item2&lt;/li&gt; &lt;li&gt;Item3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;p&gt;Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. &lt;p&gt;Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.&lt;/p&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Then add the stickyFloat.js file from the gisthub location above, and add:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $("#menu").stickyfloat({ duration: 400 }); $("#sidebar").stickyfloat({ duration: 400 }); }); &lt;/script&gt; </code></pre> <p>I think this is what you're talking about: <a href="http://jsfiddle.net/qVwTY/2/" rel="nofollow">http://jsfiddle.net/qVwTY/2/</a></p> <p>The top menu sticks to the top of the window, and the sidebar will stick to the bottom of that. I didn't test it in all the browsers I have, but it's working in the latest versions of Firefox and Chrome.</p> <p>Hope this helps.</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