We all are used facebook social media and see on profile page auto fix sidebar. One time i thing about facebook sidebar position auto fixed and i lot of search on search engine eg. google,bing,etc but any where i can’t find that type of sidebar with demo and source. Then i decide to develop and share with you to how to build that.
See below my logic to develop facebook style sidebar :
If you view below source with description and demo or download this auto fix sidebar demo.
Live Demo
DownloadSee below simple steps to create facebook style fix auto sidebar :
See below structure of html to do.
First you need to open notepad or any editor then write down below code.
<html>
<head>
<title>Facebook style fix sidebar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" id="dashicons-css" href="style.css" type="text/css" media="all">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!--Header-->
<div class="header">
<div class="container">Header text</div>
</div>
<!--End Header-->
<!--Contents-->
<div class="content">
<div class="container">
<!--Sidebar-->
<div class="sidebar">
<div class="sidebarInner">
Sidebar contents here...
</div>
</div>
<!--End Sidebar-->
<!--Page Contents-->
<div class="page-content">
Website content here...
</div>
<!--End website Contents-->
<!--Footer-->
<div class="footer">
<div class="container">Footer contents</div>
</div>
<!--End footer-->
</body>
</html>
Above code i describe why we need to some class. On .header class need to be fixed sidebar when come header top, .container are just for fix container width, .footer are same as header to position are fixed to relative when scroll down at end of footer, .page-content is used to check content is more then sidebar or not when scrolling.
And one of the mos important is .sidebar class they can manage position if sidebar and .sidebarInner are wrapped sidebar content when position fixed.
Create a below one style.css file for making some GUI.
body,html{width: 100%;padding: 0px;margin: 0px; font-family: arial,sans-serif;}
.container{width: 900px; margin: auto;position: re}
.header{height: 140px; background: #ddd; padding-top: 40px;}
.footer{height: 100px;background: #ddd; clear: both;}
.container >.sidebar{width: 300px; margin: 30px 0px; padding: 10px;display: inline-block; float: left;}
.page-content{width: 558px; padding: 10px; display: inline-block;}
p{border: 1px solid #dedede; margin:20px 10px;padding: 10px;}
.sidebar >.sidebarInner{position: absolute; max-width: 300px; border: 1px solid #dedede;}
.header h1{font-family: arial,sans-serif; font-size: 50px}Then after add script.js file and they are main part of fix sidebar.
$(window).scroll(function(){
_fixSidebar($(this));
});
var ofx=0;
var scrollDown=0;
var scrollUp=0;
function _fixSidebar(top)
{
var sidebar=$(".sidebar >.sidebarInner");
var wtop=top.scrollTop();
var headerTop=$(".header").innerHeight();
var footerTop=$(".footer").offset().top;
var wh=$(document).innerHeight();
var sbh=sidebar.innerHeight();
if(sbh>$(".page-content").innerHeight()){
sidebar.css("position","inherit");
}
else if(screen.height<sbh && $(window).width()>920)
{
if(wtop>(footerTop-sbh/2))
sidebar.css({"position":"absolute","top":footerTop-sbh-30,"bottom":"auto"});
else if(wtop<headerTop)
sidebar.css("position","inherit");
else
{
if(wtop-ofx>0)
{
if((scrollDown-wtop)<0){
if(wtop-scrollDown>sbh-screen.height+135 && headerTop+(sbh/2)<wtop)
sidebar.css({"position":"fixed","bottom":10,"top":"auto"});
else
sidebar.css({"position":"absolute","top":sidebar.offset().top,"bottom":"auto"});}
scrollUp=wtop;
}
else
{
if((scrollUp-wtop)<sbh)
if(scrollUp-wtop>sbh-screen.height+135)
sidebar.css({"position":"fixed",top:20});
else
sidebar.css({"position":"absolute","top":sidebar.offset().top,"bottom":"auto"});
scrollDown=wtop;
}
ofx=wtop;
}
}
}
Done after adding above script and structure of html.
If have any problem binding on you website then contact us or write down comment.
Thanks 🙂
Thanks 🙂