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

请勿删除#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);
});

Answer 2

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

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

Ajax加载导致内容跳转

2 个答案: