jQueryの条件付きアニメーションが上手くいきません。

Question

###前提・実現したいこと
下にスクロールしてトップから1000ｐｘ以上1500ｐｘ未満のところでbox1を表示させ、かつアニメーションで動かし、そして、999ｐｘ未満で、かつ1501以上の範囲ではアニメーションで動いたのち非表示にしたいです。

なんとなくまずいのはわかっていますが、stop()や var aaa = true で変数を宣言して最初の条件が終わった段階でfalse を返すなど、方法はあるんじゃないかと思えるのですが、その書き方がよくわかりません。。

教えてください、。。

よろしくお願いいたします。

特にないです。

###該当のソースコード
//jquery//

$(function(){
	$(window).scroll(function(){
		var scr_counting = $(document).scrollTop()
		if(scr_counting >= 1000 && scr_counting < 1500 ){
			$("#box1").show().css({
				top:"0px",
				opacity:"0.7"				
				})
			}else if(scr_counting < 999 && scr_counting > 1501){
				$("#box1").css({
					top:"-100px",
					opacity:"0"
					})
					}
		})

})

//html//
<section id="page1">
</section>
<section id="page2">
  <div id="box1">hello</div>
</section>

//css//
#page1{
  position:relative;
  width:100%;
  height:800px;
}
#page2{
  position:relative;
  width:100%;
  height:1000px;
}
#box1{
  position:relative;
  width:100px;
  height:100px;
  top:-100px;
  display:none;
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[s8_chu]

質問文のコードに//css//と書いてありますが、<section id="page1">というコードもcssに記述しているのですか？

[Lhankor_Mhy]

`scr_counting < 999 && scr_counting > 1501` これは常にfalseでは。

Answer 1

とりあえずこうだと思います。また、直接CSSの値を触るよりも、クラスを付けて切り替えるほうがコントロールしやすいと思います。

// scr_counting < 999 && scr_counting > 1501
//                    ↓
   scr_counting < 999 || scr_counting > 1501