Fixed Sidebar (CSS/Javascript/jQuery) Tutorial/Code

Fixed Sidebar

CSS Javascript jQuery
Browse Category | Friday, March 9, 2012 | William Thomas

Description: After a set top window offset, the sidebar stays in a fixed position as users scroll the page. When around the top of the page the sidebar retains its original position.

Code:

window.onload = z;
window.onresize = z;
window.onscroll = z;
var q = 0; //USED TO PREVENT INFINITE SCROLLING
function z(){

var l = $(".sidebar").position().left; //LEFT OFFSET OF SIDEBAR
var o = window.pageYOffset; //TOP OFFSET OF WINDOW
var p = document.body.scrollHeight; //HEIGHT OF THE PAGE WITH SCROLL
var ww = window.innerWidth; //WIDTH OF WINDOW
var wh = window.innerHeight; //HEIGHT OF WINDOW
var sidew = $(".sidebar").width(); //WIDTH OF SIDEBAR
var sideh = $(".sidebar").height(); //HEIGHT OF SIDEBAR
var t = $(".box").position().top; //TOP OFFSET OF SIDEBAR'S PARENT ELEMENT
var dsh = 500; //ORIGINAL HEIGHT OF SIDEBAR (MUST MATCH THE VALUE IN CSS TO BE SMOOTH)
var diff = ww - l; //DIFFERENCE BETWEEN WIDTH OF WINDOW AND LEFT OFFSET OF SIDEBAR

if(o>t){ //IF VERTICAL SCROLL IS GREATER THAN THE TOP OFFSET

//KEEPS THE BODY FROM INFINITELY INCREASING BY ITS OWN HEIGHT ON EVERY SCROLL

q++;
if(q==1){

$("body").css({"height":p+"px"});

}

//IF WINDOW IS GREATER THAN THE SIDEBAR & THE LEFT OFFSET

if(ww>sidew+l){

$(".sidebar").css({"position":"fixed", "left":l+"px", "top":"0px"}); //FIXED

} else {

$(".sidebar").css({"position":"static"}); //NOT FIXED

}

} else {

$(".sidebar").css({"position":"static"}); //NOT FIXED

}

//IF ORIGINAL HEIGHT OF SIDEBAR IS GREATER THAN THE HEIGHT OF WINDOW

if(dsh>wh){

$(".sidebar").css({"height":wh+"px"}); //MAKE THE SIDEBAR FIT INSIDE THE WINDOW

} else {

$(".sidebar").css({"height":dsh+"px"}); //REVERTS TO ITS ORIGINAL HEIGHT

}

</script>

<style>

.box {

width: 700px;

} .sidebar {

background: #ffffff; border: 1px #32baed solid; height: 500px; /*(IMPORTANT) NEEDS SOME DEFAULT HEIGHT FOR THE JS TO MAINTAIN*/ overflow-y: auto; /*(IMPORTANT) ALLOWS TO SEE EVERYTHING IN THE SIDEBAR IF CUT SHORT*/ position: static; /*(IMPORTANT) ALLOWS SIDEBAR TO SCROLL IF PAGE SEES THE TOP OF SIDEBAR*/ width: 100px;

} .content {

border: 1px #32baed solid; float: left; width: 500px;

}

</style>

</head>
<body>

<div class="box">
<div class="content">
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
Main Content 
</div>
<div class="sidebar">
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
Sidebar 
</div>
</div>
</body>
</html>

Views: 2,196 Downloads: 59

(Optional in case you want a reply)

0 Comments

Email:
Password:
	Keep me logged in

Email: