Databases
StackOverflow2013
Postsdbo
POA funky scrolling layout
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POA funky scrolling layout
    text
    copied!<p>I am trying to adapt the layout demonstrated at <a href="http://www.webeffectual.com/" rel="nofollow">http://www.webeffectual.com/</a> for my needs. I want these features:</p> <ol> <li><code>#toolbar</code> div to be fixed at the top of the browser window independent of any scrolling.</li> <li><code>#resultsLayer</code> to slide over <code>#introLayer</code> when scrolling</li> <li><code>#searchBar</code> to stick to the top but below #toolbar once <code>#searchbar</code> hits <code>#toolbar</code> while scrolling (just like the div containing 5 round colorful buttons sticks to the top of the window as demonstrated in <a href="http://www.webeffectual.com/" rel="nofollow">http://www.webeffectual.com/</a>, but in my case it should be below the #toolbar)</li> <li>the <code>#resultsContainer</code> and all its children should slide under the <code>#searchBar</code> with further scrolling (just like the text in the pink layer of <a href="http://www.webeffectual.com" rel="nofollow">http://www.webeffectual.com</a> slides under the navigation section)</li> </ol> <p>so far I have achieved this: <a href="http://jsfiddle.net/timmaktu/ttnZa/2/" rel="nofollow">fiddle</a> and it seems a steep road ahead:</p> <ol> <li>got it working thanx to @HC_</li> <li>achieved :)</li> <li>got it working :) <del>but there is a gap between <code>#searchBar</code> and <code>#results</code>which gets filled on scrolling :(</del></li> <li>got this working too by setting a width on #searchBar <del>except for that gap</del></li> </ol> <p><code>ul</code> tag had a margin set to 16px, set it to 0px n that got rid of the gap got everything working :) Happy New Year to All! esp @HC_, hammered into new year!</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