Wednesday, September 14, 2011

Add a sticky sidebar to your site(Compatible with IE)

Below is the code to add a sticky sidebar to your site.

<style type='text/css'>
    #sidenav {
    right:0px;
    top:200px;
    width: 300px;
    position: fixed; /*--Fix the sidenav to stay in one spot--*/
    float: right; /*--Keeps sidenav into place when Fixed positioning fails--*/
}


*html #sidenav {
     position: absolute;
     right: expression( ( 0   ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) )   'px' );
     top: expression( ( 0   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) )   'px' );
}
</style>



Step1:
Find </head> code in your site and Paste above code Ablove the </head> code.

Step2:
<div id='sidenav'>Contents Here</div>
Find <body> code in your site and Place the above code after <body> tag and Then save your site.

Note: If you want to place the sticky side bar at left side then replace the in the code "right" to "left".

No comments:

Post a Comment

Previous Page Next Page Go Home
back to top