メインビジュアルだけresizeのイベントを指定したい

Question

実現したいこと

メインビジュアルが表示されている間、ウィンドウ幅を変えたらページトップに移動したいです。

発生している問題・分からないこと

メインビジュアル以外の場所でもページトップに戻ってしまいます。
何かいい方法はないでしょうか。

該当のソースコード

<div class="mainvisual">メインビジュアル</div>
<div class="contA">コンテンツ</div>
:
:

$(function () {
    $(window).on("scroll", function () {
      const contATop = $(".contA").offset().top;
      const scrollTop = $(window).scrollTop();
  
      if (scrollTop >= contATop) {//contAが表示されたら
        $(".mainvisual").css("display", "none");
        window.addEventListener("resize", () => {
            window.scrollTo(100, 0);
        });
      } else {
        $(".mainvisual").css("display", "flex");
        window.addEventListener("resize", () => {
            window.scrollTo(0, 0);
        });
      }
    });
});

.mainvisual{height:400vh;}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

GoogleやchatGTPなどで色々聞いてみたのですが、思うような結果が得られず、
.contA以降でもウィンドウ幅を変えるとページトップに戻ってしまいます。

補足

メインビジュアルはgsapで動かしているため高さを400vhにしていますが、実際は100vhのエリアだけスクロールしています。
念の為、.contAがページトップに来たらdisplay:noneで非表示にしています。

Comments

[yambejp]

＞メインビジュアルが表示されている間

命題があいまいです
→メインビジュアルがちょっとでも表示されている
→メインビジュアルがｎ％以上表示されている
→メインビジュアルがすべて表示されている
で指定方法が変わってきます

[juner]

現象確認できました。 この様な感じでしょうか？
playground: https://livecodes.io/?x=id/dchta2q6vst

[slw]

説明不足すみません。
確かに...わかりやすいご指摘ありがとうございます！
次回より気をつけます。

Answer 1

> メインビジュアル以外の場所でもページトップに戻ってしまいます。

それは イベントをそこで登録しても別ルートをあとで通ったとしても解除されないからです。

その為、まずはこう書き換えます

$(function () {
  window.addEventListener("resize", () => {
    window.scrollTo(100, 0);
  });
  $(window).on("scroll", function () {
    const contATop = $(".contA").offset().top;
    const scrollTop = $(window).scrollTop();

    if (scrollTop >= contATop) {
      //contAが表示されたら
      $(".mainvisual").css("display", "none");
    } else {
      $(".mainvisual").css("display", "flex");
    }
  });
});

ただ、これでは動作は変わりません。 その為、フラグとなる変数を用意してそれによりリサイズイベントを有効/無効を切り替え また、メインビジュアルが非表示/表示を切り替えた際に 真偽値を切り替える様にします。

$(function () {
  /** メインビジュアルが非表示であるフラグ */
  let isMainVisualHidden = false;
  window.addEventListener("resize", () => {
    if (isMainVisualHidden) return;
    window.scrollTo(100, 0);
  });
  $(window).on("scroll", function () {
    const contATop = $(".contA").offset().top;
    const scrollTop = $(window).scrollTop();
    if (scrollTop >= contATop) {
      //contAが表示されたら
      $(".mainvisual").css("display", "none");
      isMainVisualHidden = true;
    } else {
      $(".mainvisual").css("display", "flex");
      isMainVisualHidden = false;
    }
  });
});

これで想定された動作になると思われます。

参考

• 上記の対応を行ったplayground

Comments

[slw]

できました！
メインビジュアルの非表示をフラグにするというのはなるほどです！
説明不足のなか、的確なご指示ありがとうございました。
codePenで実装できたのでURL記載いたします。

▼codePen
https://codepen.io/lvuyemud-the-looper/pen/ZEggRpx

[juner]

なにそれ素敵な実装！
解決おめでとうございます！

Answer 2

IntersectionObserverで交差情報を取得してください
例えばこんな感じ

<style>
.dummy{
  height:60%;
}
.dummy:nth-child(odd){
  background-Color:yellow;
}
.mainvisual{
  height:30%;
  background-Color:lime;
}
</style>
<script>
const crossing=()=>{
  const observer = new IntersectionObserver(changes=>{
    for (let change of changes) {
      if(change.intersectionRatio >0){
          window.scrollTo(0,0);
      }
    }
  });
  observer.observe(document.querySelector('.mainvisual'));
}
window.addEventListener('resize',crossing);
</script>
<div class="dummy">dummy</div>
<div class="dummy">dummy</div>
<div class="mainvisual">メインビジュアル</div>
<div class="dummy">dummy</div>
<div class="dummy">dummy</div>

Comments

[slw]

説明不足のなか、ソースまで書いてくださりありがとうございます。
解決しましたので、codePenのURL記載いたします。
ありがとうございました！

▼codePen
https://codepen.io/lvuyemud-the-looper/pen/ZEggRpx