javascript - $(window).resize和$(“＃foo”)。scroll上的触发函数

想在$（window）.resize和$（“＃foo”）。scroll上触发相同的函数。

http://jsfiddle.net/ySukf/1/

需要#stick粘贴到#foo的顶部。问题是#stick的位置在滚动和调整窗口大小时会有点跳动。有什么帮助吗？

最佳答案

Here's a solution

首先，我们再添加两个容器-.content内的#foo div和.inner内的#stick div：

<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>​

请注意，#anchor消失了。

容器的css分为两半：

#foo {
    position: relative;
    margin: 50px auto;
    width: 200px;
    height: 200px;
}
#foo .content {
    width: inherit;
    height: inherit;
    overflow: auto;
}

然后将以下内容应用于#stick。内盒继承了外盒的尺寸。

#stick {
    width: 100px;
    height: 50px;
}
#stick .inner {
    width: inherit;
    height: inherit;
    background: pink;
}
#stick.stuck .inner {
    position: absolute;
    top: 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');
}​