JavaScript生成的margin-top搞乱了展示位置的内容

Question

Case:

I have a slider that scrolls through some images, while, when you scroll down, the menu and content moves over it. Once the menu gets to the top, it sticks to it, as it's changed to a fixed position.

Problem:

Once the menu snaps to place, it resets it's original position (a margin-top) from a generated ammount of pixels to the 0 value. This cases the page to jump that generated ammount of pixels down, which shouldn't happen. It shouldn't jump down at all, but I think it has to do with the ammount of pixels that is generated before it is set to 0, which cases on my screen a gap of 955 pixels. It jumps thus 955 pixels down after it applies the fixed state.

So my questio now is, how can i fix this. I tried applying instead of a margin a padding (no go, white screen), applying instead of a margin-top: 0px a top:0 so i dont have to use the margins, but also a no go.

Case link:

http://test.thewebfanatics.com/jellyweb/home

Code

$(window).scroll(function () {
    if ($('.resolutionwrap').length == 1) {
        var documentScrollTop = $(document).scrollTop() + 100;
        var fixedToggle = $('#slides').height();

        if (documentScrollTop > fixedToggle) {
            $('#hoofdmenu').addClass('fixed');
            $('#hoofdmenu').css("margin-top", "0px");
        } else {
            $('#hoofdmenu').removeClass('fixed');
            $('#hoofdmenu').css("margin-top", $('#slides').height() - 100); 
        }
    }
});

Hope someone can help me on this matter.

Answer 1

Okay, as I was posting the remark on the fiddle, I realized that if the content moved, I could also just simply return it to it's position by javascript by making a counter balanced value of it.

Shortly said: I countered the margin, by creating a different margin-top that balanced that scale. It's maybe not the most beautifull solution, but it did the trick.

$(window).scroll(function () {
    if ($('.resolutionwrap').length == 1) {
        var documentScrollTop = $(document).scrollTop() + 100;
        var fixedToggle = $('#slides').height();
//      console.log($('#slides').height());
//      console.log($('.resolutionwrap').height());

        if (documentScrollTop > fixedToggle) {
            $('#hoofdmenu').addClass('fixed');
            $('#hoofdmenu').css("margin-top", "0px");
            $('.content').css("margin-top", $('#slides').height());  
        } else {
            $('#hoofdmenu').removeClass('fixed');
            $('#hoofdmenu').css("margin-top", $('#slides').height() - 100); 
            $('.content').css("margin-top", "0px"); 
        }
    }
})