The fixed right bar on scroll
In some scenarios, adding a fixed right or left bar as a user scrolls down the web page may increase the chances that the content inside the right or left scroll bar is seen or get more clicks. For example, if you have Adsense or other ads there that work on pay per click basis, the ads remain visible even user scrolls down for reading main content.
In that case, the ads are seen and chances are those will get more attention. Similarly, you may place some other important content like special offers or products or announcement that you want to get more attention.
In this tutorial, a jQuery based plug-in is used for creating the fixed right bar as the user scrolls down.
You simply need to include the JS file of the plug-in after downloading it from here and use a little jQuery code as shown in the demo below.
A demo of fixed right bar upon scrolling
For seeing the fixed right bar in action, scroll down the demo page (click the demo link below). Keep on scrolling till right bar ends and see how it remains fixed.
See online demo and code
The markup used in the demo:
<h1>Scroll down to see the action</h1> <div class="main-container"> <div class="content-box"> <strong style="top: 0;">The content appears here</strong> <div>You may place content here</div> <div>Place text paragraphs, images etc.</div> <div></div> <div></div> <strong style="bottom: 0;">Content ends here</strong> </div> <div class="right-bar-demo"> <strong style="top: 0;">The right bar</strong> <p>some ad</p> <div>Place the ad</div> <div>Subscription form</div> <div>Special offer</div> <div>Product</div> <div></div> <div></div> <div></div> <div></div> <strong style="bottom: 0;">Stops here</strong> </div> </div>
A little CSS for div spacing for main content and right bar:
h1{font-size: 40px;text-align: center;margin: 250px 0;}
h1 a{color: #666;}
.main-container{margin: 0 auto 400px;width: 980px;position: relative;color: #eee;font: bold 16px/1.5 Verdana;text-align: center;;}
.content-box div{width: 100%;height: 800px;}
.content-box div:nth-child(odd){background-color: #004000;}
.content-box{position: relative; width: 750px; background-color: #79FF79;}
.content-box strong{position: absolute;left: 0;width: 100%;height: 20px;background-color: #000080;}
.right-bar-demo{width: 200px;background-color: #B7C6D2;padding: 30px 0;
position: absolute;
top: 0;
right: 0;
transition: background-color .2s ease;
}
.right-bar-demo div{height: 200px;width: 100%;}
.right-bar-demo div:nth-child(odd){background-color: #708BA7;}
.right-bar-demo strong{position: absolute;left: 0;width: 100%;height: 20px;background-color: #F0263A;}
As mentioned, a little jQuery code is also used. You can see the complete code and live demo by clicking the above image or link.