Take the 2-minute tour ×

I'm having a problem with the property position:fixed. If you check out my jfiddle you see, that when you scroll, and the black div hits the top, then via JS it adds the style "stick" which makes it fixed in position - as intended. Unfortunately, when I do this, and the div is getting the fixed style, the div below the black bar jumps up a bit, which ruins the idea.

The main CSS I think you have to look at is:

.orangeContent {
margin:0px auto;
padding:40px 0px 0px 0px;}

    header {
margin:0px auto;

.stick {
box-shadow:0px 4px 2px -2px #b32f01 ;

And of course the Javascript:

    $(document).ready(function() {
    var s = $("header");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= pos.top) {
        } else {

So, basically, any idea on how to fix this ?

Thanks in advance.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

This is due to the fact that the black header jumps out of the box flow, so the div below jumps up. I suggest you add the class fix to the pageWrapper instead of the header itself and then, in your css:

.pageWrapper header{
    position: static

.pageWrapper div { /* the one with all the lorem ipsum */
    padding-top: 0;

.pageWrapper.stick header{
    position: fixed

.pageWrapper.stick div { /* the one with all the lorem ipsum */
    padding-top: 20px; /* needs to be set as the same height of the header */

I edited your fiddle to show you what I mean.


I used the .stick + .text selector which basically means the .text after the .stick, but I suggest you place the .text inside the pageWrapper and then go with .stick .text

share|improve this answer
Wow, this works like a charm. Thank you very much :) –  Denver Dang Sep 12 '13 at 12:14

Of course div will jump as position:fixed takes element from the flow. If your header has static height than adjust padding(or margin) of header.stick + div in your css file otherwise recalculate it on adding/removing 'stick' class

share|improve this answer

Your Answer


