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

Question

案件：

我有一个滑块，可以滚动浏览某些图像，而当您向下滚动时，菜单和内容将在其上移动。 菜单移至顶部后，将其固定在菜单上，因为它已更改为固定位置。

问题：

菜单捕捉到位置后，它将其原始位置（生成的像素数量）重置为0值（原始边缘）。 这会导致页面跳转而产生的像素下降，这种情况不应该发生。 它根本不应该跳下来，但是我认为这与在将其设置为0之前生成的像素数量有关，在我的屏幕上，这相当于955像素。 因此，在应用固定状态后，它会向下跳955个像素。

所以我现在的问题是，我该如何解决这个问题。 我尝试应用填充而不是空白（不走，白屏），而不是使用margin-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

好的，当我在小提琴上发表评论时，我意识到，如果内容移动了，我还可以通过使用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"); 
        }
    }
})