DIV要素をスクロールで非表示にしたい

Question

実現したいこと

スクロールしたらdiv要素を非表示にすることです。

ソースコード

  #back1 {
	background-image: -webkit-linear-gradient(top, #15140F 0%, #34312C 97%);/* 背景色 */
	background-image: linear-gradient(-180deg, #15140F 0%, #34312C 97%);　　/* 背景色 */
	color: white; /* 文字色 */
	height: 100vh;/* divサイズ */
        }

<div id="back1">
<!-- ここに説明 -->
</div>
<div id="back2">
<!--  ここに本文 -->

試したこと

jQueryの「トップへ戻るボタン」のスクロール量をif文で分岐するところの不等号を逆にしたが、ちょっとスクロールしないと表示されない。

できればお願いしたいこと

あまり複雑なコードや、PHPはやめてください。

###追加
スクロール時に
divのback1を非表示
back2を表示すればできますか?

※高さはCSSでbodyの高さを指定しています
(ソース追加しました)

「トップへ戻るボタン」の仕組みを使用して、一定スクロールで表示させるようにしていますが動かなかったという意味です。
https://syncer.jp/jquery-to-top-button
このサイトのTopボタンのCSSを<div id="back1">に書き換えています

Comments

[x_x]

「トップへ戻るボタン」はどこにあるのですか？
このコードだけでは何がしたいのかわかりません。

[satauki]

更新した通りです

[x_x]

『「トップへ戻るボタン」の仕組み』と言っているものも何を指しているのかわかりません。試したコードを載せてもらえるでしょうか？

[satauki]

すみません。
コード自体は消してしまいました。
仕組みは覚えています。
https://syncer.jp/jquery-to-top-button
このサイトのTopボタンのCSSを<div id="back1">に書き換えています

[x_x]

参考にしたサイトがあるなら質問文に追記しておいたほうがいいでしょう。ここからどのように変更しようとしているのでしょうか？

[satauki]

「ボタンを出現させる」の所を非表示に書き換えて<div id="back1">に適用させようとしています。
あと、<div id="back2">にそのまま適用させようとしています。(スクロール量の部分は変更します。)
実際にすると初期で非表示→スクロールで表示→一定スクロールで非表示になります。

Answer 1

非表示の仕様次第ですね
スクロールしたときに本当にdisplay:noneにしてしまったら
高さがなくなってしまうのでスクロール自体が無意味になります
つまり命題が矛盾しています