jqueryでスクロールしたらコンテンツが出てくる機能を実装したい

Question

前提・実現したいこと

WordPressにてjqueryを使ってスクロールしたらコンテンツか出てくる機能を実装したいです。
イメージは（https://palermo.tokyo/test/）の横バージョン

試したこと

「Custom CSS & JS」というプラグインで以下のコードを追加してみました。

該当のソースコード

<div class="heading scroll_box">
  <h2 class="special-heading">Salon concept</h2>
  <div class="main-heading">
    <h1>SALON CONCEPT</h1>
    <p>当サロンのコンセプト</p>
  </div>
</div>

.scroll_box {
  transform: translate(-100%, 0);
  opacity: 0;
}
.scroll_box.move {
	transform: none;
	transition: .5s;
	opacity: 1;
}

$(window).on('scroll load', function() {
  var scTop = $(this).scrollTop();
  if(scTop > 700) {
    $('.scroll_box').addClass('move');
  }
});

問題

なぜか動きません。
$('div').hide();みたいな普通のコードはきちんと動いたので、コード自体に問題があるようです。

デベロッパーツールにエラーも出ていません。
consoleには

jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1

と出ていたので、バージョンは1.4.1のminだと思います。

分かる人いましたらアドバイスいただけると幸いです。

Comments

[m.ts10806]

前の質問との違いが今一つわかりませんが、質問は編集できるので質問を編集して追記してもらえば良いですし、バージョン等はコンソールよりもhtml内の読み込み記述を確認するかjsファイル冒頭を確認してください

Answer 1

transitionは.moveがついていない方に指定する必要があるかもしれません。

.scroll_box {
  transition: .5s;
  transform: translate(-100%, 0);
  opacity: 0;
}
.scroll_box.move {
    transform: none;  
    opacity: 1;
}