0

私が行っているプロジェクトで 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 - 2 つのヘッダーを見てください。1 つは withhearts 用で、もう 1 つは brenton_clarke 用です。
写真 2 - brenton_clarke のヘッダーが withheart の下部に到達しました
写真 3 - brenton_clarke のヘッダーが withheart のオフスクリーンを押し上げています
写真 4 - brenton_clarke のヘッダーは、pauloctavious が押し出すまで上部に固定されています

私のフィドル

誰でもこれについて助けてもらえますか？

以下に提案されているリンクを使用すると、ある程度機能するようになりましたが、それほどうまくいきませんでした: http://jsfiddle.net/reb6X/1/

.text() ではなく .html() を使用するように jQuery を変更したことで、今ではそれほど悪くはありません: http://jsfiddle.net/reb6X/2/

4

1 に答える 1

5

この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');
于 2013-08-15T03:21:44.523 に答える