Hi all!

I'm creating a one page website, that horizontally scrolls between the different sections. I want to change the page background colour on each section. I have a white bit at the top with a menu and the logo. If I just style the different sections to have different background colours, it doesn't extend to the bottom of the page. The padding-bottom: 100%, margin-bottom: -100% doesn't work because it fails when using in-page anchors (which I clearly am for a one page layout). Therefore, I'm using javascript to change the body background colour.

While it's easy to set up an onclick event on each link to change the background colour, what about if they scroll horizontally? Ideally, I'd like each section to appear a different colour, so if they scroll, they see half and half. But more likely, if they scroll past the half way mark between two sections, it changed to the bigger half's colour.

How can I achieve this?

Thanks,
Marcus