jQuery ページの特定の要素を超えたときに表示非表示

Question

jQueryを勉強している超新米コーダーです。

以下2つの条件を組み合わせたjqueryを記述したいのですが、うまくいかないのでお力をお借りしたく質問させていただきます。

・ページをスクロールした際に、特定の要素に到達したタイミングで[.box」を表示、非表示をさせる。
・最初は非表示の状態で、100pxスクロールしたタイミングで[.box」を表示、それまでは非表示。

色々なサイトを参考にしながら、ぐちゃぐちゃですが似たような動きができるところまではかけたのですが、現状として、

・100pxを超えないと表示させたいものが50pxくらいのスクロールでも表示されてしまう事。
・一番下までスクロールしてから一番上に戻ると、最初の段階で非表示されていてほしいものが表示されてしまう事。

という点が起きています。

HTML（超簡易）

<div class="box">表示非表示させたいもの</div> <p>あああ</p> <p class="event-area">ここを超えたらboxを表示非表示</p> <p>ううう</p> ・ ・ ・ <p>んんん</p>

boxにはposition:fixed;がかかっています

jquery部分

$(function() {
var box = $('.box');
box.hide();
var thisOffset = $('.event-area').offset().top + $('.event-area').innerHeight();

$(window).on({
'scroll': function(){
if ($(this).scrollTop() > 100) {
box.fadeIn();
} else {
box.fadeOut();
}
},
'scroll': function(){
if ($(window).scrollTop() + $(window).height() > thisOffset) {
box.fadeOut();
} else {
box .fadeIn();
}
}
});
});

elseが二回入っているせいでおかしくなっているのではないかと思うのですが、これ以外の書き方が膨らませず。。
よろしくお願いします。

Answer 1

解決例

以下2つの条件を組み合わせたjqueryを記述したいのですが

二つの条件を組み合わせるというのを「両方の条件を満たしたときにfadeInしたい」
という風に解釈していいのなら以下のようになるかと思います。

$(function () {
            var box = $('.box');
            box.hide();
            var thisOffset = $('.event-area').offset().top + $('.event-area').innerHeight();

            $(window).on(
                'scroll',
                function () {
                    // 100pxスクロールもしくは特定の要素に到達したならfadeIn
                    if ($(this).scrollTop() > 100
                        || $(window).scrollTop() > thisOffset) {
                        console.log($(this).scrollTop());
                        box.fadeIn();
                    } else {
                        console.log('fede out1');
                        box.fadeOut();
                    }
                });
        });