jQueryでスクロール距離を2回取得したい

前提・実現したいこと

jQueryで特定の位置までスクロールしたら消える要素の実装しています。
コンテンツの間に「もっと見る」ボタンを配置しており、
要素を隠しています。
その状態だと指定の位置で消えてくれるのですが、
「もっと見る」ボタンをクリックし、高さが増えた状態だと「もっと見るボタン」の中の要素で消えてしまいます。

「もっと見る」ボタンクリックしたら、高さを再度取得してスクロールアクションをしたいです。

拙い説明で申し訳ないですが、よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード html

<div class="btn_wrapper">
	<a href="" class="btn">特定の位置で消えるボタン
	</a>
</div>

<Section class="sec01"> </section> <div class="text_wrapper"> <div class="text_in"> <p class="Text"> ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー </p> </div> </div> <div class="show_more"> <span>もっと見る</span> </div>


<Section class="sec02"><!ここで特定の位置で消えるボタンを消す-->
</section>



```jQuery
	var scrollStart = $('.sec01').offset().top; //ページ上部からの距離を取得
		var scrollEnd = $('.sec02').offset().top; //ページ上部からの距離を取得
		var windowHeight = $(window).height(); //ウインドウの高さを取得
		var distance = 0;
		
		$(document).scroll(function(){
			

		$(".show_more").click(function() {//もっと見るボタンを押したら
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　distance = $(this).scrollTop(); //スクロール位置を取得したい


		if (scrollEnd <= distance) { //スクロール距離がendの位置を超えたら
					console.log("endの位置を超えた");
		$('.btn_wrapper').fadeOut(); //フェードアウト
		} else{
	　　　　　　　　　　　　　　　　$('.btn_wrapper').fadeIn(); //endより上部に戻ったらフェードイン
				console.log("endより上部に戻った");
			}
		});

		
			if (scrollStart <= distance) { //スクロール距離がstartの位置を超えたら
				$('.btn_wrapper').addClass('scrolled'); //scrolledというclassを追加
	
			} else if (scrollStart >= distance) { //スクロールがページ上部まで戻ったら
				$('.btn_wrapper').removeClass('scrolled'); //classを削除
			
			}
			
			if (scrollEnd <= distance + windowHeight/2) { //スクロール距離がendの位置を超えたら
				$('.btn_wrapper').fadeOut(); //フェードアウト
			} else{
				$('.btn_wrapper').fadeIn(); //endより上部に戻ったらフェードイン
			}

		});

	</script>

```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。