Efecto en elementos al hacer scrool jquery

 Jquery  Efecto en cada elemento cuando este en una posicion  al hacer scrool 


HTML :


<div class="content">
    <div class="article" id ="id1">test</div>
    <div class="article" id ="id2">test</div>
    <div class="article" id ="id3">test</div>
    <div class="article" id ="id4">test</div>
</div>








Jquery :


<script type="text/javascript">

jQuery(document).ready(function($) {
    $(".content .article").each(function(index, el) {
        var id = $(this).attr('id');
        console.log(id);
        var element = $('#'+id).offset().top-200;
        $(window).scroll(function () {
            if ($(window).scrollTop() > element) {
               $('#'+id).css('border', 'solid');
           } else {
            $('#'+id).css('border', 'none');
        }
    });
    });
});

</script>

------------------..............------------------