Below is the code to keep the sidebar fixed while scrolling the page.

It is one of the easiest way to keep it fixed.

HTML-

Here is the simple design having main content div and a particular section of a sidebar.

<div id="main_container">
	
	    <div id="heading">

    		<h1>Sidebar fixed</h1>
    		
    				
		</div>
				
		<div id="content">

		  <p>Scroll down and watch the sidebar on the right follow.</p>
		
		  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

		  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		
		</div>
		
		<div id="scrolling_div">
				
		  	<ul>
			    <li><a href="#">content1</a></li>
			    <li><a href="#">content2</a></li>
			    <li><a href="#">content3</a></li>
			</ul>
		
		</div>
	
	</div>

CSS-

Here is the css to give the width and color of div and text.

#main_container { width: 600px; margin: 15px auto; }
p { margin: 0 0 15px 0; }
p:first-child { background: #fffcde; padding: 10px; }
#scrolling_div ul { background: #eee; padding: 10px; }
li { margin: 0 0 0 20px; }
#content { width: 390px; float: left; }
#scrolling_div { width: 190px; float: right; }

JAVASCRIPT-

On the off chance that we utilize JavaScript, we can quantify how far down the window the client has looked after a window.scroll occasion. In the event that that separation is more remote than the beginning top position of the sidebar, we can conform the top margin of the sidebar to push it down into unmistakable reach.

$(function() {
            var setoff = $("#scrolling_div").offset();
            var paddingtop = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > setoff.top) {
                    $("#scrolling_div").stop().animate({
                        marginTop: $(window).scrollTop() - setoff.top + paddingtop
                    });
                } else {
                    $("#scrolling_div").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

https://jsfiddle.net/x6x2mnqz/