สอบถามเกี่ยวกับการ scroll display none & display block หน่อยครับ

<style> 
    li{
        background : yellow;
		height: 500px;
        margin: 20px;
    }
	.c {
		display:none;
	}
	
	.c.active {
		display:block;
	}
</style>
<div class="c" id="p_para1" style="position: fixed;margin-top: -35px;">
   
    some 
</div>
<div class="c" id="p_para2" style="position: fixed;margin-top: -35px;">
    
   long text 
</div>
<ul>

<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>

</ul>
<script>
    $(document).ready(function () {
        $(window).on('scroll', function () {
            var Wscroll = $(this).scrollTop();
			
            $('a[name^="para"]').each(function () {
                var ThisOffset = $(this).closest('li').offset();
                if (Wscroll > ThisOffset.top && Wscroll < ThisOffset.top + $(this).closest('li').outerHeight(true)) {
                    $(this).closest('li').css('background', 'red');
					var ffc = $(this).closest('li').attr('class');
						$("#p_"+ffc).show();
                }
            });
        });
    });
</script>