How to prevent content jump after adding position:fixed to subhead?

Question

I'm currently working on my new portfolio you can see here: http://katharinakoeth.de/neu/ And there's already my problem. As you can see, I added some jquery action to my subheads (i'm really a beginner when it comes to javascript) to change its position from inherit to fixed/sticky .. but when the change happens, my content jumps up because of the sudden space. » it's most obvious with the "people I enjoy working with" ... the first person suddenly disappears as soon as the subhead becomes sticky.

Is there any way to either add extra space or prevent the jump in another way?

Answer 1

When you change those subheaders to position:fixed, they're removed from the flow of the document. They have a margin-bottom: 75px which is also removed from the flow when that happens.

Try changing that to a margin-top:75px to the start of the blocks below each subheader; that won't "disappear" when the subheads change position values, so your spacing should be preserved.

Answer 2

FYI, your fix.js file could probably be refactored down to something like this:

var $titles = $("header h2");
$(window).scroll(function(){

    var win_top = $(this).scrollTop();
    $titles.each(function(){
        var div_top1 = $(this).offset().top;
        if (win_top > div_top) $(this).addClass('stick')
        else $(this).removeClass('stick');
    });

});