当页面在div内滚动时，jquery保持div在视图中

Question

我在页面右侧有一个链接列表，单击该链接时会加载 ajax 内容

由于链接列表比内容长，我希望始终保持加载的内容可见

我正在使用以下代码来执行此操作

$(window).scroll(function(){
    $("#answertext")
    .stop()
    .animate({"marginTop": ($(window).scrollTop() - 500) + "px"}, "slow" );
});

问题是我想将它包含在其持有的 div 中，此时如果我滚动到页面顶部，div 会离开其包含的 div 并悬停在上面的内容上。

看看他的 url 看看问题（点击一个新闻项目加载 ajax 内容，然后滚动页面） Demo

更新：

感谢 locrizak，我稍微编辑了您的代码：

和你一样，在 _offset 声明中去掉# 最初它什么也没做，所以我将 _offset 更改为包含 div '#tabpage5' 它现在在加载内容时将 div 放置在正确的位置。

var tp5_offset = $("#tabpage5").offset();
if ( $(window).scrollTop() > tp5_offset.top ){
    $("#answertext")
    .stop()
    .animate({"marginTop": ($(window).scrollTop() - tp5_offset.top) + "px"}, "slow" );
}

虽然我希望它在窗口滚动时滚动，但要保持在#tabpage5 div 的范围内。关于如何做到这一点的任何想法？

Answer 1

将此行更改如下：

.animate({"marginTop": (Math.max(0, $(window).scrollTop() - 500)) + "px"}, "slow" );

Answer 2

试试这个：

var _offset = $("answertext").offset(); if ( $(window).scrollTop() > _offset.top ){ $("#answertext") .stop() .animate({"marginTop": ($(window).scrollTop() - _offset.top) + "px"}, "slow" ); }

这应该将内容粘贴在顶部内容区域。

更新

你可以这样做：

var _offset = $("answertext").offset(); var _currentSpace = parseFloat($("answertext").css('marginTop')) + $("answertext").height(); var _maxHeight = $('#infotext').height() + $('#infotext').offset().top; if ( $(window).scrollTop() > _offset.top && _currentSpace

由于您不断使右侧的 div 变大，因此引用左侧高度上的 div 会更好，因为它不会改变。

让我知道它是如何工作的。