Tips to Create a Static Div
Last modified on by
Create the div
First of all, you will need to create the actual div layer. Here’s an example of one:
You can put this code at any point in your page since you will be using CSS to set its absolute position.
Position the div
Here’s the CSS code you will be using:
We use left and top in the #box so that we can align the container box right in the middle (horizontally) and 300px from the top. So what’s the margin-left? Simple. Since we want the box to appear to the left of our page, we simply need to set themargin-left to shift the box to the left, left of our content.
At this stage, you should be able to see your box in the right position. The code above is of course, just an example. You will need to modify the values so that the box is positioned correctly in your site.
That’s it. You will need jQuery for this to work. To help you understand the code, here it is again with some comments inside it:
Quite simple once you go through it slowly, right? The idea is to have the box lock into a static position once you’re about to scroll past it. That way, it won’t ever leave your screen.
I encourage you to try the above and play around with it – the above is an excellent and simple to understand starting point. You might want to limit the box from both the top and the bottom.