Jquery 使用新内容放置以用户为中心的内容

用户正在查看蓝色内容并对其进行处理。然后进行AJAX调用，并在页面顶部添加一些新的橙色内容。但由于蓝色内容已经位于页面顶部，因此蓝色内容必须向下移动以适应新的橙色内容

我希望能够强制蓝色内容保持在原来的位置，并让窗口将橙色+窗口顶部向上推

---

我能充分解释我自己吗？我会用谷歌搜索这个，但我甚至不知道从哪里开始搜索关键字。

假设你有一个内容包装器（比如说

），并且“蓝色内容”被包装在包装器中它自己的容器中，你会想进行AJAX调用，将“橙色内容”存储在一个变量中，然后使用

前缀（）

方法，将新内容作为第一个子项插入“蓝色内容”上方

一个简单的例子：

<div class="wrapper">
  <div id="blue-content">
    <p>This is blue content</p>
  </div>
</div>

//save your AJAX result into a variable to use
var ajaxResult;
var $orangeContent = '<div id="orange-content">' + ajaxResult + '</div>';
$('div.wrapper').prepend($orangeContent);
$('body,html').animate({scrollTop:$orangeContent.offset().top}, 'slow');

这是蓝色内容

//将AJAX结果保存到变量中以供使用
var-ajaxResult；
变量$orangeContent=''+ajaxResult+''；
$（'div.wrapper'）.prepend（$orangeContent）；
$（'body，html'）.animate（{scrollTop:$orangeContent.offset（）.top}，'slow'）；

这很可能都在一个函数中，所以它按顺序执行，但这取决于您如何实现它。您将看到我添加了

animate（）

位，以便在将窗口添加到包装器之前，窗口将滚动到橙色内容

这是一个非常基本的例子，但应该会引导您走向正确的方向

---

祝你好运

添加橙色元素后，可以通过滚动橙色元素的高度来实现这一点。为此：

• 用于滚动窗口
• 用于获取元素的高度

这是一个演示（我添加了一堆模拟内容，因此可以使用滚动）：

函数addOrange（）{ //在这里，您将执行AJAX调用并获得橙色内容 var orange='

我是橙色的！

； $（“#蓝色”）。之前（橙色）； scrollBy（0，$（“#橙色”）.outerHeight（）； }

*{margin:0；padding:0；border:0；}
按钮{背景：#4488cc；填充：8px 16px；颜色：白色；}
#蓝色{颜色：蓝色；}
#橙色{颜色：橙色；}

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

我是蓝色的
使用AJAX添加文本

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，只是为了填充

模拟文本，仅用于填充…

您的答案没有解决主要问题，即如何保持“蓝色内容”可见（在窗口内）。编辑以更好地解决问题。但是，您的解释是关闭的，因为没有提到“保持‘蓝色内容’可见（在窗口内）”“但由于蓝色内容已经位于页面顶部，因此蓝色内容必须向下移动以适应新的橙色内容。我希望能够强制蓝色内容保持在原来的位置，并让窗口将橙色+窗口顶部向上推。”您可能会发现自己和用户更容易将编辑器作为“窗口”打开“覆盖项目列表的顶部。项目列表可以在覆盖下不断更新，但不会影响覆盖的位置和大小。另一种方法是在有新内容可用时在页面顶部显示横幅，而不是立即更新页面。这让用户可以选择是准备好查看新内容，还是继续按原样显示屏幕。这就是SO和Twitter处理这个用户体验场景的方式。特别要注意的是：“这个解决方案有一个问题：如果没有滚动，它就不起作用。”你可以计算窗口的总高度，内容的总高度，新内容的总高度，然后在页面底部添加一个空div，其中

高度=（（总窗口高度）-（总内容高度））+（新内容高度）

。但是，从长远来看，选择不需要滚动窗口的UX解决方案可能是更好的选择