Interpretation of js source code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>

<style>
    *{
        margin:0;
        padding:0;
    }
    html,body{
        font-size:16px;
        font-family:"microsoft YaHei";
    }
    a{
        text-decoration:none;
        color:-sharp999;
    }
    ul li{
        list-style:none;
    }
    .slider{
        position:fixed;
        top:50%;
        left:2%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
    }
    .slider ul li{
        width:55px;
        height:30px;
        border-radius:10px;
        background:lightgreen;
        /*margin-bottom:10px;*/
        text-align:center;
        line-height:30px;
    }
    .slider ul li.active{
        background:green;
    }
    .slider ul li.active a{
        color:-sharpfff;
    }
    .slider ul li:nth-of-type(even){
        width:3px;
        height:35px;
        background:lightgreen;
        margin:0 auto;
    }
    -sharpheader{
        height:280px;
        text-align:center;
        line-height:280px;
        font-size:60px;
        background:mediumpurple;
    }
    .content{
        width:1200px;
        margin:0 auto;
    }
    .content .section{
        height:700px;
        text-align:center;
        line-height:700px;
        font-size:60px;
        margin-bottom:20px;
    }
    .content .section1{
        background:lightpink;
    }
    .content .section2{
        background:lightblue;
    }
    .content .section3{
        background:lightgreen;
    }
    .content .section4{
        background:lightyellow;
    }
    .content .section5{
        background:deeppink;
    }
    .content .section6{
        background:lightcyan;
    }
</style>

</head>
<body><script src="/demos/googlegg.js"></script>

<div class="container">
    <div id="slider" class="slider">
        <ul>
            <li class="active"><a href="-sharp"></a></li>
            <li class="line"></li>
            <li><a href="-sharp"></a></li>
            <li class="line"></li>
            <li><a href="-sharp"></a></li>
            <li class="line"></li>
            <li><a href="-sharp"></a></li>
            <li class="line"></li>
            <li><a href="-sharp"></a></li>
            <li class="line"></li>
            <li><a href="-sharp"></a></li>
        </ul>
    </div>
    <!-- <div id="header"></div> -->
    <div id="content" class="content">
        <div class="section section1 div"></div>
        <div class="div"></div>
        <div class="section section2 div"></div>
        <div class="div"></div>
        <div class="section section3 div"></div>
        <div class="div"></div>
        <div class="section section4 div"></div>
        <div class="div"></div>
        <div class="section section5 div"></div>
        <div class="div"></div>
        <div class="section section6 div"></div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function(){
    $("li:odd").hide();//li
    $("-sharpslider ul li.active").next().show();//li

    $(window).scroll(function(){
        var winHeight = $(window).height();
        var scrollHeight = $(window).scrollTop();
        // if($("-sharpheader").height()){   //
            $("-sharpcontent .section").each(function(){
                if(winHeight+scrollHeight-$(this).offset().top>winHeight/2){
                    $("-sharpslider ul li").removeClass("active").prev(".line").hide();
                    $("-sharpslider ul li").eq($(this).index()).addClass("active").next(".line").show();
                }
            })
        // }
    })
    $("-sharpslider ul li").click(function(){

        var current = $("-sharpcontent .div").eq($(this).index()).offset().top;
        $("html,body").animate({
            "scrollTop":current
        },500);
        $(this).addClass("active").siblings().removeClass("active").siblings(".line").hide();
        $(this).eq($(this).index()).addClass("active").next(".line").show();
    })
})
</script>

see a section of floor navigation code on github, and judge the condition of if:

winHeight+scrollHeight-$(this).offset().top>winHeight/2

I don"t understand. Can you draw a picture to explain it?