javascript - $（window）.resizeおよび$（ "＃foo"）。scrollで関数をトリガーします

Question

$（window）.resizeと$（ "＃foo"）。scrollで同じ関数をトリガーしたい。

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

#stickの上部に固執する必要があり#fooます。問題は、#stickスクロール時やウィンドウのサイズ変更時に、の位置が少しジャンプすることです。何か助けはありますか？

Answer 1

これが解決策です

最初に、さらに2つのコンテナを追加します-.content内部のdiv#fooと内部の.innerdiv #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');
}​