Floating Sticky sidebar for a blog or others site is now mostly used to enrich users browsing experience. It’s very easy to do. We just need css and js to complete this process. Before going to the process, Be confirm that, your website is using latest jquery and you have backed up your files. Let’s see the steps of Sticky sidebar.
Open and write the following code in your style.css
.stickyPosition {
position: fixed;
top: 0px; // set your top margin as you need
width: 25%; // your desired width
}
Now put the following code just before the </body> tag in your footer.
<script>
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
var xh = $(".your_header_class_name").height();
var xsh = $(".your_sidebar_class_name").height();
var th = xh+xsh; // total height
if (scroll >= th) {
$(".your_sidebar_class").addClass("stickyPosition");
} else {
$(". your_sidebar_class ").removeClass("stickyPosition ");
}
});
</script>
If you have followed the process, Now check your website is everything is ok and you are ready to upload your project. Thank you for being with me.
Note:
- You Must Call your Main Jquery.js file before execute the given script.
- To avoid jquery conflict it is better to use jQuery than a $ (Doller) sign.