Contents
Create the div
First of all, you will need to create the actual div layer. Here’s an example of one:
1 2 3 | <div id="box"> <img src="notice.jpg" /></div> |
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:
1 2 3 4 5 6 7 8 9 10 | #box { position: absolute; top: 300px; left: 50%; width: 100px; margin-left: -500px;}#box.fixed { position: fixed;} |
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.
We also set #box.fixed which will be triggered by Javascript whenever the page scrolls into or outside of the area we want our box to stay static in.
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.
Create the Javascript
The next step is the Javascript. We need it to check where the page is each time we scroll. If it’s within a specific area, we want to set the box to static so that it stops moving. How do we do this?
1 2 3 4 5 6 7 8 9 10 11 12 | $(function () { var msie6 = $.browser == 'msie' && $.browser.version < 7; if (!msie6) { var top = $('#box').offset().top; $(window).scroll(function (event) { var y = $(this).scrollTop(); if (y >= top) { $('#box').addClass('fixed'); } else { $('#box').removeClass('fixed'); } }); }}); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | $(function () { // Check whether browser is IE6 var msie6 = $.browser == 'msie' && $.browser.version < 7; // Only run the following code if browser // is not IE6. On IE6, the box will always // scroll. if (!msie6) { // Set the 'top' variable. The following // code calculates the initial position of // the box. var top = $('#box').offset().top; // Next, we use jQuery's scroll function // to monitor the page as we scroll through. $(window).scroll(function (event) { // In the following line, we set 'y' to // be the amount of pixels scrolled // from the top. var y = $(this).scrollTop(); // Have you scrolled beyond the // box? If so, we need to set the box // to fixed. if (y >= top) { // Set the box to the 'fixed' class. $('#box').addClass('fixed'); } else { // Remove the 'fixed' class $('#box').removeClass('fixed'); } }); }}); |
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.
