Testings scroll function activate code

HTML

<br><br><br>
<div class="container">
    <div class="box box1">
        Div 1 Not Here
    </div>
    
    <div class="box box2">
        Div 2 Not Here
    </div>
    
    <div class="box box3">
        Div 3 Not Here
    </div>
    
    <div class="box box4">
        Div 4 HERE!
    </div>
    
    <div class="box box5">
        Div 3 Not Here
    </div>
</div>

<p id="log"></p>

CSS

.container {
    width: 200px;
    height: 200px;
    font-family: Arial, sans-serif;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: auto;
}

.box {
    width: 100%;
    height: 100px;
    line-height: 100px;
    color: black;
    text-align: center;
    border: 1px solid #ccc;
}

.box1 { background: cyan; }
.box2 { background: yellow; }
.box3 { background: orange; }
.box4 { color: white; background: red; }
.box5 { background: purple; }

JavaScript

var count = 0;
$('.container' ).scroll(function() {
    if($(".box4").position().top + $(".box4").height() < $(".container").position().top + $(".container").height()){
        count++;
        $("#log").html(count);
    }
});