Javascript $（窗口）上的触发函数。调整大小和$（“foo”）。滚动

要在$（窗口）上触发相同的函数。在$（“#foo”）上调整大小并滚动

需要

#stick

粘贴到

#foo

的顶部。问题是当滚动和调整窗口大小时，

#stick

的位置有点不稳定。有什么帮助吗？

首先，我们再添加两个容器，一个是

.content

div inside

\foo

，另一个是

.inside

div inside

\stick

：

<div id="foo">
    <div class="content">
        <p>Lorem ipsum dolor sit amet.</p>
        <div id="stick">
            <div class="inner">stick</div>
        </div>
        <p>...</p>
    </div>
</div>​

我们将以下内容应用于

#stick

。内部长方体继承外部长方体的大小

#斗杆{
宽度：100px；
高度：50px；
}
#内线{
宽度：继承；
身高：继承；
背景：粉红色；
}
#粘住，粘住，内部{
位置：绝对位置；
排名：0；
}

在css中，几乎所有内容都得到了处理-javascript是：

$(document).ready(function() {
    $("#foo .content").scroll(stickyTop);
    $(window).resize(stickyTop);
});

function stickyTop() {
    //position is now relative to #foo
    if ($("#stick").position().top < 0)
        $("#stick").addClass('stuck');
    else
        $('#stick').removeClass('stuck');
}​

$（文档）.ready（函数（）{
$（“#foo.content”）。滚动（stickyTop）；
$（窗口）。调整大小（粘贴顶部）；
});
函数stickyTop（）{
//位置现在相对于#foo
如果（$（“#杆”）.position（）.top<0）
$（“#stick”）.addClass（“stick”）；
其他的
$（'#stick'）。移除类（'stick'）；
}​

我不太明白你的

#锚

div做了什么…@Eric当

#锚

从文本流中取出

#杆

时，div会将内容向下推（推的量等于

#杆

的高度）

位置：fixed

就像一个符咒。谢谢@Eric.BTW这正是我需要它的原因：很好，这也是我的最终解决方案，但这看起来更干净：）

$(document).ready(function() {
    $("#foo .content").scroll(stickyTop);
    $(window).resize(stickyTop);
});

function stickyTop() {
    //position is now relative to #foo
    if ($("#stick").position().top < 0)
        $("#stick").addClass('stuck');
    else
        $('#stick').removeClass('stuck');
}​