Как закрепить ленту при скроллинге меню?

$(function(){ 
            Profile.load(); 
        }); 
 
        Profile = { 
            load:function(){ 
                this.links(); 
                this.social(); 
                this.accordion(); 
            }, 
            links:function(){ 
                $('a[href="#"]').click(function(e){ 
                    e.preventDefault(); 
                }); 
            }, 
            social:function(){ 
                $('.accordion .about-me .photo .photo-overlay .plus').click(function(){ 
                    $('.social-link').toggleClass('active'); 
                    $('.about-me').toggleClass('blur'); 
                }); 
                $('.social-link').click(function(){ 
                    $(this).toggleClass('active'); 
                    $('.about-me').toggleClass('blur'); 
                }); 
            }, 
            accordion:function(){ 
                var subMenus = $('.accordion .sub-nav').hide(); 
                $('.accordion > a').each(function(){ 
                    if($(this).hasClass('active')){ 
                        $(this).next().slideDown(100); 
                    } 
                }); 
                $('.accordion > a').click(function(){ 
                    $this = $(this); 
                    $target =  $this.next(); 
                    $this.siblings('a').removeAttr('class'); 
                    $this.addClass('active'); 
                    if(!$target.hasClass('active')){ 
                        subMenus.removeClass('active').slideUp(100); 
                        $target.addClass('active').slideDown(100); 
                    } 
                    return false; 
                }); 
            } 
        }

body{ 
    margin:0; 
    color:#444; 
    font:400 16px/18px Roboto, sans-serif; 
} 
.accordion-wrap{ 
    top:0; 
    left:0; 
    position:fixed; 
    height:100%; 
    width: 220px; 
    overflow: auto; 
} 
.accordion{ 
    width:100%; 
    max-width:280px; 
    overflow:hidden; 
    border-radius:3px; 
    background: #147ec3; 
    box-shadow:0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24); 
} 
.accordion>a{ 
    color: whitesmoke; 
    padding:15px; 
    display:block; 
    text-decoration:none; 
    transition:all .3s ease-in-out 0s; 
} 
.accordion>a:not(:last-child){ 
    border-bottom:1px solid rgba(0,0,0,.2); 
} 
.accordion>a:hover, 
.accordion>a.active{ 
    background:rgb(25, 83, 148); 
} 
.accordion>a.active{ 
    color:white; 
} 
 
.accordion .sub-nav{ 
    display:none; 
    color:#374046; 
    overflow:hidden; 
    background:#ecf0f1; 
} 
.accordion .sub-nav.open{ 
    display:block; 
} 
.accordion .sub-nav a{ 
    display:block; 
    color:inherit; 
    font-weight:300; 
    padding:10px 15px; 
    text-decoration:none; 
    transition:all .2s ease-in-out 0s; 
} 
.accordion .sub-nav a:not(:last-child){ 
    border-bottom:1px solid rgba(0,0,0,.1); 
} 
.accordion .sub-nav a:hover{ 
    background: rgba(255, 151, 13, 0.44); 
    box-shadow:5px 0 0 #e58a0b inset; 
} 
 
.accordion .html{ 
    padding:15px; 
} 
.accordion .about-me{ 
    text-align:center; 
    position:relative; 
} 
.accordion .about-me h4{ 
    margin-bottom:0; 
} 
.accordion .about-me p{ 
    font-size:14px; 
    font-weight:300; 
    margin-bottom:0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="accordion-wrap"> 
    <div class="accordion"> 
        <a href="#" class="active"><i class="fa fa-envelope"></i> Profile</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a> 
            <a href="#">Important <span class="pull-right alert-numb">10</span></a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Chat</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a> 
            <a href="#">Important <span class="pull-right alert-numb">10</span></a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Messages <span class="pull-right alert-numb">21</span></a> 
        <div class="sub-nav"> 
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a> 
            <a href="#">Important <span class="pull-right alert-numb">10</span></a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a> 
            <a href="#">Important <span class="pull-right alert-numb">10</span></a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Profile</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a> 
            <a href="#">Important <span class="pull-right alert-numb">10</span></a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Chat</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Messages</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Messages </a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Profile</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Chat</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Messages</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Chat</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important</a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-envelope"></i> Messages </a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a> 
        <div class="sub-nav"> 
            <a href="#">Inbox </a> 
            <a href="#">Important </a> 
            <a href="#">Sent</a> 
            <a href="#">Draft</a> 
            <a href="#">Trash</a> 
            <a href="#">All messages</a> 
        </div> 
    </div> 
</div> 
<div style="height: 3000px; background-color: #9fc9e5"></div>