One main problem with creating a "sticky" or non stick top bar was that using position:fixed
or position:absolute
will remove the element from the document flow. This means that other elements do not consider the header when positioning themselves. To combat this, the main content of Stack Overflow unilaterally has a padding to the top of 60 pixels.
If you look at the noscript
HTML it looks like this:
<noscript><div id="noscript-padding"></div></noscript>
Looking at the included CSS, the definition for #noscript-padding is
#noscript-padding {
padding-top: 1.9em;
}
Which is insufficient to overcome the top bar. This definition should be
#noscript-padding {
padding-top: 60px;
}
In order to be visible starting after the top bar.
Optionally it could also be:
#noscript-padding {
padding-top: 60px;
position: absolute;
}
which would avoid pushing the main content down another 60 pixels creating a rather large gap, so long as the message saying "needs more jQuery" "works best with JavaScript" is not taller than the 60 pixels whitespace allotted between the top bar and the content.