javascript - DIV 坚持到顶部直到被下一个 DIV 推离屏幕

Question

我正在尝试在我正在做的项目中获得与 Instagram 时间线类似的效果。我的 HTML 是：

<div class="item">
    <div class="title">
         <h1>Some title</h1>
 <span>Time here</span>

    </div>
    <div class="content"></div>
</div>

在页面下方重复了很多次，我的 CSS 是：

* {
    margin: 0;
    padding: 0;
}
.item {
    width: 100%;
    background-color: red;
}
.item h1, span{
    padding: 2px 0 5px 5px;
}
.item span{
    display: inline;
}
.title {
    background-color: blue;
}
.content {
    height: 200px;
    background-color: green;
}

我想要发生的是当用户滚动时，当用户滚动时<div class="title">粘在顶部，但是当下一个<div class="title">出现时，它会将前一个“推”出屏幕，然后将其自身固定到顶部。

屏幕截图：
图 1 - 查看两个标题，一个用于心脏，另一个用于 brenton_clarke。
图 2 - brenton_clarke 的头球已到达 withheart 的底部
图 3 - brenton_clarke 的头球正在推动 withheart 的屏幕外
图 4 - brenton_clarke 的头球现在卡在顶部，直到 pauloctavious 将其推开

我的小提琴

谁能给我一些帮助？

---

通过下面建议的链接，我能够让它工作，但不是很好：http: //jsfiddle.net/reb6X/1/

---

将 jQuery 修改为使用 .html() 而不是 .text() 现在效果还不错：http: //jsfiddle.net/reb6X/2/

Answer 1

你可能想看看这个 jsfiddle。 http://jsfiddle.net/kennis/JTvFZ/

我认为它可以让你朝着正确的方向前进。

// Index of the currently 'active' section
var activeCache = null;

// Actual rendered height of a header element
var cloneHeight = function(){
    var $clone = $('<div class="clone"></div>').appendTo('body'),
        cloneHeight = $clone.outerHeight();
    $clone.remove();
    return cloneHeight;
}();

// Top offsets of each header
var offsets = [];

// Figure out which section is 'active'
var activeHeaderIndex = function(){
    var scrollTop = document.body.scrollTop;
    for ( var i = 0; i < offsets.length; i++ )
        if ( offsets[i] - cloneHeight > scrollTop )
            return Math.max( i - 1, 0 );
}

// Build the 'offsets' array
$('.header').each(function(i, obj){
    offsets.push( $(this).offset().top );
});

// Listen to scroll events
$(window).on('scroll', function(){
    var active = activeHeaderIndex(), 
        scroll = document.body.scrollTop,
        clone = $('.clone').length,
        $active = $('.header').eq(active),
        prevTitle = $('.header').eq(active - 1).text(),
        title = $active.text(),
        $fixed = $('.fixed');
    // Hide fixed header
    if ( offsets[active] > scroll ){
        if ( !clone ){
            $('.header').eq(0).hide();
            $('<li class="clone">' + prevTitle + '</li>').insertBefore($active);
        }
        $fixed.hide();
    // Show fixed header
    } else {
        if ( clone ){
            $('.header').eq(0).show();
            $('.clone').remove();
        }
        $fixed.show();
    }
    // If we're not changing headers, exit
    if ( active == activeCache ) return;
    // Update active index
    activeCache = active;
    // Remove old fixed header (if any)
    $('.fixed').remove();
    // Add a new fixed header
    $fixed = $('<div class="fixed">' + title + '</div>').appendTo('body');
}).trigger('scroll');