1

As you scroll down, the top bar goes up and the moment the top bar gets out of sight, the header gets set to position: fixed;. The moment this happens, the content below takes a massive jump upward with 1 scroll wheel click.

I'm assuming its probably something simple I'm overlooking, but wanted to check to see if someone else saw the issue. I've looked through it, but can't really see whats happening right off.

I've set up a jsfiddle to show this code in full.

http://jsfiddle.net/yZVjU/

$(document).ready(function() {
    var s = $("#header");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

CSS:

#header { float: left; width: 100%; height: 60px; background: #fff; }
#header_left { float: left; display: inline; width: 650px; height: 100px; }
#header_right { float: right; display: inline; width: 200px; height: 100px; text-align: right; }


.stick {
    position:fixed;
    top:0px;
    /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
    z-index: 1000;
}

If you get to the position where the header gets set to fixed, and click up and down, you'll see where the content below is jumping more than 1 click.

10
  • 1
    1- So the problem happens when the class "stick" is added? 2-pls explain : "the content below takes a massive jump upward with 1 mouse click." Commented Jan 20, 2014 at 11:19
  • thats what it appears. But it may be an issue with styling as well. When position fixed gets added, the content below jumps up. So I'm really curious if I'm missing something in the styling. It doesn't appear to be an issue with the jquery as far as I can tell.
    – kdjernigan
    Commented Jan 20, 2014 at 11:21
  • 1
    Cuz it seems your header is not taking space of the page any more, as if it were removed. So you need to make it sticky, and at the same time occupy space. Commented Jan 20, 2014 at 11:26
  • 1
    Fixed positioning takes an element out of the flow, the same way as absolute positioning does – and that’s why the content “jumps” up as soon as you set fixed, because the header is “not there any more” for the content to keep it where it was before. Easiest solution: Position the header absolute by default (and keep the content at bay by a padding/margin of header height), and then switch it to fixed when the page is scrolled.
    – C3roe
    Commented Jan 20, 2014 at 11:35
  • 1
    ahh thanks CBroe. I reread what you said mohammed about not taking space and I get it now. Sorry. I simply added $("body").css("margin-top", 60); and it fixed the issue. Thanks everyone! Can someone add an answer so that I can accept it.
    – kdjernigan
    Commented Jan 20, 2014 at 11:40

1 Answer 1

4

When you set an element to Position Fixed, it stops taking space anymore from the document since it will be like-floating around. Therefore the rest of DOM will jump up as if that element was suddenly deleted.

Add an empty div and before you set Position to Fixed, fill in that div with empty space, or allocate more space for document to occupy.

2
  • 1
    Thanks. Didn't even think of that before. I simply added if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", 60); } else { s.removeClass("stick"); $("body").css("margin-top", 0); } and it fixed the issue.
    – kdjernigan
    Commented Jan 20, 2014 at 11:46
  • @kdjernigan your solution helped me out. Thanks a lot. Commented Dec 8, 2017 at 20:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.