特定の範囲でだけ要素を表示する方法

Question

###やりたいこと
「その１」が画面に表示されているときにだけ、「ボタン」を表示させたいです。

<section id="zero">
	<P>その０</p>
</section>
<section id="one">
	<P>その１</p>
	<button>ボタン</button>
</section>
<section id="two">
	<P>その２</p>
</section>

###やってみたこと
画面の高さを測って「.fadeOutLeft」というクラスを付与しよう。という方法で表示させようとしました。
けれど次のjQeuryが動かず、クラスが付与されません。
どうしたらクラスの付与はちゃんとできますでしょうか？

$(function() {
	var one = $("#one");
	var two = $("#two");

	$(window).scroll(function(){
		var onePosition = $(one).offset().top - $(window).height();
		var twoPosition = $(two).offset().top - $(window).height();	

		if ($(window).scrollTop() > oneposition) {
            $("#button").removeClass("fadeOutLeft");
			$("#button").addClass("fadeInLeft");
        } else if ($(window).scrollTop() > twoPosition) {
			$("#button").addClass("fadeOutLeft");
			$("#button").removeClass("fadeInLeft");
        }

	});
});

Answer 1

指定するのはbuttonタグなので#buttonではなくbuttonが正しいです。

if ($(window).scrollTop() > oneposition) {
            $("button").removeClass("fadeOutLeft");
            $("button").addClass("fadeInLeft");
        } else if ($(window).scrollTop() > twoPosition) {
            $("button").addClass("fadeOutLeft");
            $("button").removeClass("fadeInLeft");
        }

Comments

[退会済みユーザー]

ありがとうございます。あと、「oneposition」もでした。

[tagu5959]

onepositionも大文字、小文字の差異がありましたね。
解決して何よりです。