

こんにちは。JS初心者なので質問させていただきます。  
ワードプレスで写真家のウェブサイトを制作していて、各プロジェクトの記事には写真が複数枚あり、各プロジェクトごとに写真の合計数は変わります。  
ページのデザインは、余白を使って写真をランダムにグリッドで並べるデザインです。

_**＊＊＊実現したい事＊＊＊**_  
スクロールして写真がビューポート内に入るとカウントを１足していき、次の写真がビューポート内に入ると２と表示されていく機能を実装したいです。

記事に登録されている写真の合計数は取得できました。  
そして各写真をターゲット要素にして、それぞれの要素のトップの高さも取得できましたが、この後どのようなコードを書いていいのかわからず手が止まっている状態です。。。  
ロジックやご指摘、アドバイスなどをいただけると幸いです。  
よろしくお願いします。！

[code]

    <---single-post.php-->
        <?php if ($portfolioGallery) : ?>
          <div class="picture__counter">
            <div class="counter__inner">
              <span class="count">01 / </span> // ここにスクロールして要素がビューポートに入るたびに１ずつカウント足される
              <span class="total_num"> <?php echo count($portfolioGallery); ?> </span>　// 合計数を取得
              <a href="#container__top">
                <span class="arrow__top"></span>
              </a>
            </div>
          </div>
        <?php endif; ?>
      </div>
      <div class="project__photos">
        <?php if ($portfolioGallery) : ?>
          <?php foreach ($portfolioGallery as $index => $img) : ?>
            <?php if (in_array(($index % 10), [0, 3, 6, 9])) : ?>
            <?php endif; ?>
                <div class="photo <?php echo 'gallery__image--' . ($index % 10) . ' ' . $size; ?>">
                  <?php $size = ($img['width'] / $img['height'] > 1) ? 'about_landscape' : 'about_portrait';
                  echo wp_get_attachment_image($img['ID'], $size, false, ['class' => 'gallery__image--' . ($index % 10) . ' ' . $size]);
                  ?>
                </div>
              <?php endforeach; ?>
            <?php endif; ?>
          </div>
    
    
    
     /* main.js */
    
      let countTarget = $('.photo');         // ターゲット要素 
      let countNum = $('.count');            // カウント表示 0, 1, 2, 3, 4, 5,,,, 合計数までカウントする
      let totalNum = $('.total_num').text(); // 合計数 => 13, 20, 10 etc...
    
      $(countTarget).each(function (index, ele) {
        let targetContentsTop = $(ele).offset().top;
        console.log(targetContentsTop); //　各要素のトップの高さも取得 -> 946.91650390625,,,
    
        // console.log(`index is ${index + 1}`); // 後でこのインデックス番号を変数countに追加して書き換えたい
      })
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/uo34d.png)](https://i.stack.imgur.com/uo34d.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/5Zxu7.jpg)](https://i.stack.imgur.com/5Zxu7.jpg)

**＊＊＊追記＊＊＊**

[code]

    <!--html (phpなし)-->
      <div class="picture__counter">
        <div class="counter__inner">
          <span class="count"> / </span> <!--ここにカウント数を表示したい-->
            <span class="total_num"></span>　<!--各記事の写真の合計数（登録してある写真数によって変わります）-->
             <a href="#container__top">
               <span class="arrow__top"></span>
             </a>
         </div>
      </div>
    
[/code]


CC BY-SA 4.0
2021-10-07T16:50:10.827
82950
2021-10-08T19:27:44.880
2021-10-08T19:27:44.880
29392
29392
question
javascript php wordpress
スクロールして要素が表示されるたびに１ずつカウントする