Floating box on demand

Imagine a page having a long list of products where you can select multiple products and the list gets updated in a separate container. On reaching the bottom of such a page, you may forget what you have selected previously as the box holding your selections is sitting at the top of the page.

Would it not be great if such a container box also scrolled as you scroll on the page? In other words, how about a floating box that scrolls on the page as you go up or down the page.

This recipe will show you how to create a floating box that will scroll on the page automatically as you scroll up or down on a page.

Getting ready

Create a folder named Recipe5 inside the Chapter6 directory.

How to do it...

1. Create a file named index.html inside the newly created Recipe5 folder.

2. In order to demonstrate a floating DIV we must create a really long page. We do this by creating multiple paragraph elements with dummy text on the page, each with height set to 200px in CSS. After that create a...