Question

案例：

我有一个滚动滚动浏览某些图像的滑块，而当您向下滚动时，菜单和内容会在其上移动。一旦菜单到达顶部，它就会粘在上面，因为它已经变为固定位置。

问题：

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

所以现在我的问题是，我该如何解决这个问题。我尝试应用而不是边距填充（没有去，白色屏幕），应用而不是边缘顶部：0px顶部：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"); 
        }
    }
})

Javascript生成的margin-top会影响展示位置内容

1 个答案: