Ajax 加载导致内容跳转

Question

当我使用 Ajax 从另一个页面加载内容时，我的页脚会跳到页眉下方，然后再向下移动。

我认为这是由 $('#container').remove(); 引起的，这意味着我实际上是在加载新容器之前移除容器。

有没有办法阻止我的页脚在 Ajax 加载之间上下跳动？

这是我的 JQuery

$('nav a').on('click', function(e) {
   e.preventDefault();
   var url = this.href;
   $('nav a.highlight').removeClass('highlight');
   $(this).addClass('highlight');
   $('#container').remove();
   $('#content').load(url + ' #container').hide().fadeIn(3500);
});

我已经在测试服务器 here 上上传了一个发生在我身上的例子。
我不得不上传它作为一个片段或笔不允许超过一个 HTML 页

Answer 1

我并不完美，但我认为这可以帮助您获得一个想法。您可以设置 #content 的最小高度，也可以添加 class .stick_footer 到 footer 删除容器后立即删除 class .stick_footer 加载数据后。抱歉英语不好。

.stick_footer{
  position:absolute; bottom:0;left:0;right:0; top:9em;
}

Answer 2

不删除#container

$('nav a').on('click', function(e) {
  e.preventDefault();
  var url = this.href;

  $('nav a.highlight').removeClass('highlight');
  $(this).addClass('highlight');

  //$('#container').remove();
  $('#content').load(url + ' #container').hide().fadeIn(3500);
});

Ajax 加载导致内容跳转

Ajax load causes content to jump

html

javascript

ajax

jquery

jquery-events