5

別の Stack Exchange 投稿からこのコードを使用して、何らかの助けを期待しています。以下はJavaScriptです：

$(window).on("scroll resize", function(){
    var pos=$('#date').offset();
    $('.post').each(function(){
        if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
        {
            $('#date').html($(this).html()); //or any other way you want to get the date
            return; //break the loop
        }
    });
});

$(document).ready(function(){
  $(window).trigger('scroll'); // init the value
});

私は自分のウェブサイトhttp://peterwoyzbun.com/newscroll/scroll.htmlに実装しました。スクロール位置が特定のポイントに達すると、ボックス内の情報が変化します。現時点では、変更内容は div ".post" から直接取得されます。つまり、ユーザーが特定の「.post」までスクロールすると、固定された灰色のボックスに「.post」の内容が読み込まれます。

私がやりたいことは、ユーザーが現在見ているものの説明を灰色のボックスに表示させることです。したがって、ユーザーが div "content1" に到達すると、灰色のボックスに "content1" のテキスト説明が表示されます。「content1」に到達すると、div「description1」が灰色のボックス内で非表示にならなくなるのでしょうか？

どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

4

説明を含む各セクション内に隠し要素を追加します。

<div id="content1">
<p class="description" style="display: none;">content1 description</p>
....
</div>

次に、javascript で、次のような関連セクションの説明を取得します。

if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
        {
            $('#date').html($(this).find('.description').text());
            return;
        }

ジャスフィドル

于 2013-04-25T00:26:37.193 に答える