javascript - $(window).resize 和 $("#foo").scroll 上的触发函数

Question

想在 $(window).resize 和 $("#foo").scroll 上触发相同的功能。

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

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

Answer 1

这是一个解决方案

首先，我们再添加两个容器——一个.contentdiv inside#foo和一个.innerdiv 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>​

请注意，#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');
}​