JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">
    <div class="c">TEEESST</div>
    <div class="a">
        <div class="ab"></div>
        <div class="b"></div>
    </div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

CSS

.example {
    width: 100%;
    position:fixed;
}
.a {
    width: 600px;
    height: 50px;
    background-color: #888;
    position: relative;
    top: -50px;
}
.ab {
    width: 50px;
    height: 50px;
    background-color: yellow;
    float: left;
}
.b {
    width: 137px;
    height: 50px;
    background-color: red;
    margin-left: 50px;
    float: left;
}
.c {
    width: 395px;
    height: 50px;
    background-color: black;
    margin-left: 100px;
    color: white;
    position: relative;
    top: -50px;
}

JavaScript

/* MAIN FUNCTION */

var $a = $(".a"),
    $b = $(".b"),
    $c = $(".c");

function anim1() {
    $b.animate({
        width: 395
    }, {
        duration: 300,
        complete: anim2
    });
}

function anim2() {
    $a.animate({
        top: "0px"
    }, {
        duration: 400
    });
    $c.animate({
        top: "0px"
    }, {
        duration: 400
    });
}

$(".b").click(function () {
    anim1();
});

function anim10() {
    $a.animate({
        top: "-50px"
    }, {
        duration: 200,
        complete: anim20
    });
}

function anim20() {
    $b.animate({
        width: 137
    }, {
        duration: 200
    });
}

$(".ab").click(function () {
    if ($(window).scrollTop() == 0) {
        anim10();
    }
});

/* MY SOLUTION?! */


$(window).scroll(function () {
    if ($(this).scrollTop() < 200) {
        $("#treest, #treest2, #treest3").click(function () {
            anim10();
        });
    } else {
        /*  DO NOTHING ! How is that possible */
    }
});

/* SLIDE UP ONLY MAIN NAVIGATION */

$(window).scroll(function () {
    if ($(this).scrollTop() < 200) {
        $(".example").animate({
            top: "0px"
        }, {
            duration: 50,
            easing: 'easeInOutCubic'
        });
    } else {
        $(".example").animate({
            top: "-50px"
        }, {
            duration: 50,
            easing: 'easeInOutCubic'
        });
    }

    return false;
});