I am building a mobile website for a client, this is a test page:
The top section (including photo, headline, logo and the two brown buttons), is marked up like this:
<h3>AUTO, MOTORCYCLE<br />
& TRUCK ACCIDENTS<br />
CAN RUIN LIVES. WE'LL<br />
HELP YOU RECOVER.</h3>
<img class="topimg" src="img/ph_mvi1.jpg" alt="" border="0" />
<a href="http://www.bbdesign.com/lhp"><img class="logo" src="img/lg_lhp.jpg" alt="Liever Hyman Potter" border="0" /></a>
<ul class="dark floatleft">
<li><a href="tel:6103706682"><img src="img/mb_telephone.png" alt="Call for Free" border="0" />Call for Free</a></li>
<li><a href="mailto:firstname.lastname@example.org"><img src="img/mb_email.png" alt="E-Mail" border="0" />E-Mail</a></li>
Everything is working fine. However, now client asks:
"Can we have it so that when you scroll down, once the top of the logo hits the top of your screen, the logo and two brown buttons stop scrolling (so they are always visible), and the content flows underneath?"
Then, I assume if they scroll back up, they want the photo to reappear, so all of this needs to work in reverse as well.
I'm looking for some conceptual ideas here... would appreciate any input. Thank you!