In this article we’re going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content.
Before we start, check out the demo here.
Ok, now that you’ve seen it, let’s get started!
Our first step will be to set up our sticky sidebar.
Sidebar HTML
Here’s the HTML we’ll use, place this right under your <body> tag:
<div class="sidewrap">
<div class="logo">
<h1>Your Title</h1>
</div><!-- .logo -->
<div class="navigation">
<button class="navbutton" id="button1">Section 1</button>
<button class="navbutton" id="button2">Section 2</button>
<button class="navbutton" id="button3">Section 3</button>
<button class="navbutton" id="button4">Section 4</button>
</div><!-- .navigation -->
</div><!-- .sidewrap -->We wrap the entire sidebar with the <div class=”sidewrap”> and from there we need to set a few things in CSS to make it stay in place:
Sidebar CSS
body {
height: 100%;
}
.sidewrap {
width: 250px;
height: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
z-index: 9999;
} The important factors in our CSS are;
The height of the body being 100%, and our .sidebar being auto. This ensures that the sidebar will stretch all the way to the bottom of the page, regardless of the size of the browser.
Our position: fixed setting makes sure it stays in place, and the ‘top’, ‘left’ and ‘bottom’ settings will keep our sidebar against the edges of the screen.
Here’s the additional CSS for the navigation and logo div’s, our widths are set the same as our sidewrap class
.logo {
width: 250px;
margin: 10px auto 0 auto;
text-align: center;
}
.navigation {
width: 250px;
margin: 10px auto 0 auto;
text-align: center;
}
.navbutton {
margin-top: 10px;
border: 0;
left: 0;
font-size: 18px;
width: 250px;
height: 50px;
background-color: #000;
color: #fff;
cursor: pointer;
vertical-align: middle;
font-family: Verdana, Verdana, Geneva, sans-serif;
}
.navbutton:hover {
background-color: #e2e2e2;
}Main Content
The rest (or right side) of our content will be set up with this HTML:
<div id="wrapper">
<div id="section1" class="contentpart">
<p class="title">
Section 1 Title
</p><!-- p.title -->
<p class="content">
YOUR CONTENT GOES HERE :)
</p><!-- p.content -->
</div><!-- #section1 -->
</div><!-- #wrapper -->This will be the content on the right hand side of the page that is scrollable and next to our fixed sidebar. We wrap the entire content body with our <div id=”wrapper”> and then can break up our “sections” with the <div id=”section1″ class=”contentpart”>
The section1 will change to section2, section3, etc… with each one you add. Each ID must be unique for in order for our scrolling buttons on the sidebar. They will be setup to automatically scroll down to their related section ID.
jQuery
Now we need to activate our sidebar buttons with scroll functions. Here’s the jQuery function for it:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#section1").offset().top - 17
}, 1000);
});
});
</script>When clicked, our button1 in the sidebar will make the page automatically scroll down to our section1 div. In order activate other buttons we need to create an additional function like this:
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#section2").offset().top - 17
}, 1000);
});The ‘17’ value represents the top offset of the div. This will essentially be the padding from the top of the screen. The ‘1000’ value is how long it will take for the window to scroll to the desired element. Make the value higher for a slower scroll.
Conclusion
That will complete the basic layout and you can customize from there! In the source files I included comments in both files and implemented 4 navigation buttons! Enjoy!
