How to use custom sticky sidebar

How to use custom sticky sidebar

Not use jQuery only JavaScript plugin for making smart and smooth high performance custom sticky sidebar 

 HTML 

<header>
<div class="container">
<h1>Sticky sidebar Example</h1>
</div>
</header>


<div class="container">
<div class="clearfix">
<div id="sidebar">
<div class="sidebar__inner">
<p>This is sticky column</p>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.</p>

<p>In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.</p>

<p>Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.</p>
</div>
</div>
</div>

<footer>
<p>This Is footer</p>
</footer>


More information please visit this url https://www.papawebdesigner.com/

 CSS 


<style>
*{
box-sizing: border-box;
}
body{
font-family: tahoma;
margin:0;
padding: 0;
}
header {
background: #ececec;
padding: 20px;
margin-bottom: 40px;
}
header h1{
font-size: 30px;
text-align: center;
margin:0;
}

.container{
max-width: 1170px;
margin: 0 auto;
}
#content{
padding: 18px;
margin-left: 215px;
background: #ececec;
min-height: 2000px;
color: darkgrey;
}
#sidebar{
float: left;
width: 200px;
color: #000;
will-change: min-height;
height: 500px !important;
}
#sidebar .sidebar__inner{
padding: 10px;
position: relative;
transform: translate(0, 0);
transform: translate3d(0, 0, 0);
will-change: position, transform;
background: #ececec;
height: 500px !important;
}
footer{
height: 300px;
height: 85vh;
background: #ececec;
margin-top: 20px;
text-align: center;
color: #8e8d8d;
background: rgba(0, 0, 0, 0.02);
line-height: 300px;
line-height: 95vh;
}
footer p{
margin: 0;
}
.clearfix:after{
display: block;
content: "";
clear: both;
}
</style>




 JS 

<script type="text/javascript" src="https://abouolia.github.io/sticky-sidebar/js/sticky-sidebar.js"></script>

<script type="text/javascript">
var a = new StickySidebar('#sidebar', {
topSpacing: 20,
bottomSpacing: 20,
innerWrapperSelector: '.sidebar__inner'
});
</script>

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/callmehitesh/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992

Follow on pinterest    -  https://in.pinterest.com/frontendissue/