51

画面の高さの領域よりも長い DOM のオブジェクトのリストがあります。

タイムライン ツリー ビューのようなものを作成するためだけに、画面に表示されているオブジェクトを検出する必要があります。(下の写真のようなもの):

ここに画像の説明を入力

私のDOMは次のようになります。

<!-- elements visibility on screen to be DETECTED -->
<div id="elements">
    <div id="elem-1">Lorem ipsum</div>
    <div id="elem-2">Lorem ipsum</div>
    <div id="elem-3">Lorem ipsum</div>
    <div id="elem-4">Lorem ipsum</div>
    <div id="elem-5">Lorem ipsum</div>
    <div id="elem-6">Lorem ipsum</div>
    <div id="elem-7">Lorem ipsum</div>
    <div id="elem-8">Lorem ipsum</div>
</div>


<!--elements visibility on screen to be AFFECTED  -->
<ul id="timeline">
    <li view-id="elem-1">Elem-1</li>
    <li view-id="elem-2">Elem-2</li>
    <li view-id="elem-3" class="active">Elem-3</li>
    <li view-id="elem-4" class="active">Elem-4</li>
    <li view-id="elem-5" class="active">Elem-5</li>
    <li view-id="elem-6" class="active">Elem-6</li>
    <li view-id="elem-7">Elem-7</li>
    <li view-id="elem-8">Elem-8</li>
</ul>

私の目標は、コンテナーから画面上に表示される要素の ID を検出し、コンテナー内の対応する要素にクラスを#elements割り当てることです。active#timeline

Scrollイベントでこのプロセスを実行する必要があります。

これを達成する方法はありますか？

4

1 に答える 1

44

まず第一に、on-screen visible areaとして知られていViewportます。

画像はOPから取得され、Photoshopでクリーンアップされます

（画像はOPよりお借りしています。Photoshopでクリアして編集しています）

したがって、必要なのは、 内のすべての要素を検出することだけですViewport。

これは、jQuery の多くのプラグインを使用して実現できますが、次のように呼ばれる 1 つの例について説明します。jQuery withinviewport

ソースとドキュメントへのリンク: [ withInViewport - Github ]

ステップ1：

プラグインをダウンロードし、jQueryフレームワークとwithinviewportプラグインをスクリプトに含めます。

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>

.

ステップ2：

scrollイベントで関数を初期化:

$(window).bind("scroll", function() {
    //your code placeholder
});

.

ステップ 3:

セレクターを使用withinviewportしてビューポート内のすべての要素を取得し、各要素ごとに#timelineコンテナー内の対応するリスト項目にクラスを追加します。

$("#elements > div").withinviewport().each(function() {
   $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});

ステップ 4:

すべてをまとめる：

$(window).bind("scroll", function() {

    //clear all active class
    $('#timeline > li').removeClass('active');

    //add active class to timeline
    $("#elements > div").withinviewport().each(function() {
         $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
    });
});

.

.

また、このプラグインを使用すると、ビューポートの上下左右のオフセットを設定できます。

ここでデモを参照してください: http://patik.com/code/within-viewport/

于 2013-10-21T15:06:40.813 に答える