Hit enter after type your search item

Create fixed right / left bar on scroll for ads or other by jQuery

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.

jquery fixed bar

See online demo and code

The markup used in the demo:


 

A little CSS for div spacing for main content and right bar:


 

 

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.

This div height required for enabling the sticky sidebar