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