css - ページの途中でdivを開始しますが、ユーザーがページを下にスクロールすると、上部に残りますか?

Question

私が説明していることを説明するために、例を挙げたほうがよいでしょう。

カテゴリのリストを含む div 要素はページの途中から始まりますが、ユーザーが下にスクロールしても上部に残りますか?

http://www.khanacademy.org/

固定要素の作り方を知っています。私の質問は、要素をデフォルトでページの中央に表示する方法ですが、ユーザーが下にスクロールすると、要素は上部にとどまります。

Answer 1

これがあなたが探していると思うものの簡単なjsFiddleの例です。基本的に、最初は相対位置に配置されたdivがあり、ページがスクロールされると、位置が固定に変更されます。jQueryは、ここで$（window）.scrollイベントを使用して大規模な照明を行います。

jQuery：

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});​

CSS：

body {
    width: 960px;
}
#mainbar {
    width: 660px;
    float: left;
}
#sidebar {
    width: 270px;
    float: right;
}
#sticker {
    width: 200px;
    padding: 10px;
    margin-top:25px;
    background: #eee;
    border: 1px solid #ccc;
}​