Question

当窗口向下滚动到此元素时，我正在尝试使元素固定。

我遇到的这个问题是当它到达那个元素时，它会突然跳起来。我认为这是因为元素突然变得固定，因此现在不再占用文档中的任何空间，因此整个文档跳跃到元素先前所占据的高度。

为了解决这个问题，我试图同时插入相同高度的另一个元素，但这似乎也不起作用。我想知道，在这个庄园中修复元素的典型方法是什么？

这是使其滚动的代码

$(window).scroll(function() {
    if($('#nav').length) {
        scroll = $(this).scrollTop();
        pos = height-header
        if(scroll > pos) {
            $('#nav').css({'position':'fixed','top':header,'width':'100%'});
            if(!$('.empty_div').length) {
                $('body').after(empty_div);
            }
        } else {
            $('#nav').css({'position':'static','top':'0'});
            $(".empty_div").remove();
        }
    }
});

您可以在http://jsfiddle.net/op30ddxL/

查看我的代码

Answer 1

你应该给替换元素提供相同的宽度和高度，你应该将它插入dom中与#nav元素相同的位置。

$(window).scroll(function() {
    if($('#nav').length) {
        scroll = $(this).scrollTop();
        pos = height-header
        if(scroll > pos) {
            if(!$('.empty_div').length) {
                $('#nav').after(empty_div);
                $('.empty_div').css({'width':$('#nav').width(),'height':$('#nav').height()});
            }
            $('#nav').css({'position':'fixed','top':header,'width':'100%'});
        } else {
            $('#nav').css({'position':'static','top':'0'});
            $(".empty_div").remove();
        }
    }

});

当元素不在页面顶部时，使元素固定在滚动上

1 个答案: