Wickham's HTML & CSS tutorial
Icon that changes color when scrolling
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems 
warning: works in some situations or some browsers or needs care to display as you wish 
OK in Firefox, Safari, Opera, Google Chrome and IE
1 This shows an icon in the left margin that changes color without appearing to move. It is not a case of one icon scrolling up and revealing the other because the scrolling is by the divs while the background-images are stationary.
It does not work in IE6.
Two identical images, but with different colors, are made fixed background-images so they stay in the same position while the page is scrolled. They are background-images to divs with no content. The divs are identical except that the first has no float while the second has float: left and this makes the second div float left under the first div (because both divs in a sequence need floats to float side by side). They both scroll up but the background images are fixed. The images are in the same place and as the border between the divs moves across the images one is replaced by the other.
In IE7 and Firefox the background images are always placed relative to the window, in my case near the top left corner, and as all four are in the same position each only shows when its own div scrolls over it. That is why there are no initial icons for the lower example in the divs with borders. The divs have to scroll up to the top for their background icons to show.
In IE6 the background-images take their position from the parent div, not the window, so all four show in their divs and no color change is possible.
The orange icon of the top example could continue for the full page height but I have limited the div height so that you can see that it can be made to disappear (and it allows me to show the lower example with borders so that you can see what is happening).
I have made the page fixed to the left side rather than auto-centralising. The icon images will stay close to the left side of the window because they are fixed background-images. If it is auto-centralising the content will move away from the images which may not be desirable or in certain cases the content will move left over them at small window resolutions.
The code is the main stylesheet is:-
.container1 { float: left; width: 645px; margin: -20px 0 0 15px; border: 0; padding: 0; } /*if the window is not wide enough this will flip down below and cover side icons when scrolling*/
The code is the head section is:-
<style type="text/css">
#icon1 { background-image: url(images/greenw90x90.jpg); background-repeat: no-repeat; background-attachment: fixed; background-color: #e9e9e2; width: 70px; height: 120px; }
#icon2 { background-image: url(images/orangew90x90.jpg); background-attachment: fixed; background-repeat: no-repeat; width: 70px; height: 200px; float: left; }
#icon3 { background-image: url(images/greenw90x90.jpg); background-repeat: no-repeat; background-attachment: fixed; background-color: #e9e9e2; width: 70px; height: 120px; padding: 0; }
#icon4 { background-image: url(images/orangew90x90.jpg); background-attachment: fixed; background-repeat: no-repeat; width: 70px; height: 200px; float: left; padding: 0; }
</style>
<!--[if ie 7]>
<style>
.container {margin: 0 0 0 15px; } /*if the window is not wide enough this will flip down below and cover side icons when scrolling*/
</style>
<![endif]-->
<!--[if lt ie 7]>
<style>
#icon1, #icon2, #icon3, #icon4 {width: 90px; }
.container1 { width: 625px; margin: 0 0 0 15px; } /*if the window is not wide enough this will flip down below and cover side icons when scrolling*/
</style>
<![endif]-->
The code for the body html is:-
<div class="noborder" style="float: left;"> <!--containing div for left margin icons-->
<div id="icon1" class="noborder"> </div>
<div id="icon2" class="noborder"> </div>
<div class="noborder" style="clear: both; width: 60px; height: 90px;"> </div> <!--spacer div between examples-->
<div id="icon3"> <br> <br> <br>scroll to top</div>
<div id="icon4"> <br> <br> <br>scroll to top</div>
</div>
<div class="container1"> <!--if the window is not wide enough this will flip down below and cover icons when scrolling-->
....main content</div>
Notes
View/Source or View/Page Source in browser menu to see all html code.
© Wickham 2006