Javascript 生成的 margin-top 弄乱了放置内容

Question

案例:

我有一个 slider 可以滚动浏览一些图像，而当您向下滚动时，菜单和内容会移到它上面。一旦菜单到达顶部，它就会粘在上面，因为它已更改为固定位置。

问题:

一旦菜单捕捉到位置，它会将其原始位置(顶部边距)从生成的像素数量重置为 0 值。在这种情况下，页面跳转会产生大量像素，这是不应该发生的。它根本不应该跳下来，但我认为它与设置为 0 之前生成的像素数量有关，这在我的屏幕上有 955 像素的间隙。因此，它在应用固定状态后向下跳转 955 像素。

所以我现在的问题是，我该如何解决这个问题。我尝试应用填充而不是边距(不行，白屏)，应用而不是边距-top: 0px a top:0 所以我不必使用边距，但也不行。

案例链接:

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

代码

$(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); 
        }
    }
});

希望有人能帮我解决这个问题。

Answer 1

好吧，当我在 fiddle 上发表评论时，我意识到如果内容移动了，我也可以简单地通过 javascript 通过对其进行平衡值将其返回到它的位置。

简短地说:我通过创建一个平衡该比例的不同边距顶部来抵消边距。这可能不是最漂亮的解决方案，但它起到了作用。

$(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"); 
        }
    }
})