Как сделать отступ при скролле?

$(document).ready(function () { 
    $(document).on("scroll", onScroll); 
 
    $('a[href^="#"]').on('click', function (e) { 
        e.preventDefault(); 
        $(document).off("scroll"); 
         
        $('a').each(function () { 
            $(this).removeClass('panel-pp-active'); 
        }) 
        $(this).addClass('panel-pp-active'); 
       
        var target = this.hash, 
            menu = target; 
        $target = $(target); 
        $('html, body').stop().animate({ 
            'scrollTop': $target.offset().top+2 
        }, 500, 'swing', function () { 
            window.location.hash = target; 
            $(document).on("scroll", onScroll); 
        }); 
    }); 
}); 
 
function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('#panel-pp a').each(function () { 
        var currLink = $(this); 
        var refElement = $(currLink.attr("href")); 
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
            $('#panel-pp ul li a').removeClass("panel-pp-active"); 
            currLink.addClass("panel-pp-active"); 
            var pageURL = $(location). attr("href"); 
            var splittedURL = pageURL.split('/')[0]; 
           
        } 
        else{ 
            currLink.removeClass("panel-pp-active"); 
        } 
    }); 
}

body, html { 
    margin: 0; 
    padding: 0 0 0 160px; 
    height: 100%; 
    width: 100%; 
} 
#panel-pp { 
    width: 150px; 
    height: 100%; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background: #fff; 
    background: rgba(255,255,255,1); 
    -webkit-box-shadow: -1px 0px 5px rgba(0,0,0,.4); 
    -moz-box-shadow: -1px 0px 5px rgba(0,0,0,.4); 
    box-shadow: -1px 0px 5px rgba(0,0,0,.4); 
    z-index: 11; 
} 
#panel-pp ul { 
    margin: 15px 0 0 0; 
} 
#panel-pp ul li { 
    list-style: none; 
} 
.panel-pp-main { 
  padding: 10px 20px; 
} 
.panel-pp-main a { 
    font-size: 16px; 
    line-height: 30px; 
    font-family: PT Serif,Georgia,Times New Roman,Times,serif; 
    text-decoration: none; 
    color: #333; 
} 
.panel-pp-main .panel-pp-active { 
    color: #da251e; 
    color: rgb(218,37,30); 
} 
#pp1, 
#pp2, 
#pp3 { 
height: 300px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 
<div id="pp1">Секция 1</div> 
<div id="pp2">Секция 2</div> 
<div id="pp3">Секция 3</div> 
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 
<div id="panel-pp"> 
<div class="panel-pp-main"> 
<ul> 
<li><a href="#pp1">Один</a></li> 
<li><a href="#pp2">Два</a></li> 
<li><a href="#pp3">Три</a></li> 
</ul> 
</div> 
</div>