1

私は2つの列を持っています。右側の列は、コンテンツの通常のスクロール可能なペインです。クラス名の左側stickyの列は、固定位置と静的位置を切り替えようとしている列です。右側の列を最後までスクロールするときは、固定して表示する必要があります。右側の列の最後に到達すると (次のセクションが表示されると)、stickydiv の位置は静的に変更され、ページと共に通常どおりスクロールする必要があります。次のセクションは、ブラウザー ウィンドウの上部に到達するまで (通常は) 同じ方法でスクロールする必要があります。ここで、表示中の現在のstickydiv が固定位置に変更されます。

HTML:

<section>
    <div class="c-2 sticky"></div> /* Background image */
    <div class="c-2">
        <p>Any volume of content. Must cater for long and short pieces</p>
        ....
    </div>
</section>

CSS: 

.content {
    width: 100%;
    overflow: hidden;
    float: left;
    padding-left: 130px;
    position: relative;
}

.c-2 {
    position: relative;
    width: 50%;
    left: 50%;
    overflow: hidden;
    background: #e4f;
}

    .c-2.sticky {
        background: url(img/holder.jpg) fixed top center no-repeat #fff;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover; 
        position: fixed;
        left: 0;
        width: 60%;
    }

JS は私が落ちる場所です。これを開始する方法がわかりません。StickyKitを使用してみましたが、うまくいきませんでした。ここに JSFiddle があります: http://jsfiddle.net/6HPX5/

4

2 に答える 2

0

新しいセクションが始まる場所に「アンカー」を配置する必要があります。次に jQuery を使用して、この要素の位置を確認し、アンカーが表示されていることを確認したら、jQuery(id).css を使用します。 () 位置を変更するオプション。

または、別の方法として、スクロールを追跡し、左側の要素を移動する必要がある場合は、animate を使用して画面の外に移動します。

アップデート

http://api.jquery.com/css/ - 位置属性を変更します。

http://api.jquery.com/scroll/ - スクロールを検出する

http://api.jquery.com/position/またはhttp://api.jquery.com/offset/ - アンカーの位置を取得します。

そして、これを追加します：

jQuery(window).scroll(function(e) {
   //track scrolling
});
于 2013-10-28T16:15:59.457 に答える