Hi - I've found this awesome fluid/fixed footer effect on this website. The top footer is fixed, but the footer below is revealed and the top footer moves with it when you scroll down. Can anyone suggest a tutorial that covers this effect or point me in the right direction? Thanks!

well after having a look at the source, it appears that this site is using HMTL5:

 

<footer id="fluid_footer">
<div class="wrapper clearfix">
	<div class="clearfix">
		<div class="col1">
			<div class="facebook">
				<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmarshallheadphones&width=340&colorscheme=dark&connections=0&stream=false&header=false&height=70" scrolling="no" border="0" frameborder="0" allowTransparency="true"></iframe>
			</div>
		</div>

		<div class="col2">
			<div class="share">
				<a href="http://www.twitter.com/marshallhp" target="_blank" class="twitter ir btn" title="Twitter">Twitter</a>
				<a href="http://www.facebook.com/marshallheadphones" target="_blank" class="facebook ir btn" title="Facebook">Facebook</a>
			</div>
		</div>
	</div>
</div>
</footer>
<footer id="footer">
<div class="wrapper clearfix">
	<div class="clearfix">
		<div class="col1">
			<nav class="main_nav">
				<ul class="level1 clearfix tex">
					<li><a href="/products" title="Products">Products</a></li><li><a href="/featured" title="Featured">Featured</a></li><li><a href="/about/marshall-story" title="About">About</a></li>					</ul>

			</nav>
			<nav class="sub_nav">
				<ul class="clearfix">
					<li><a href="/info/press" title="Press">Press</a></li><li><a href="/info/warranty" title="Warranty">Warranty</a></li><li><a href="/info/faq" title="FAQ">FAQ</a></li><li><a href="/info/contact" title="Contact">Contact</a></li>						<li><a href="/info/shipping" title="Shipping">Shipping</a></li>
					<li><a href="/info/terms-conditions" title="Terms & Conditions">Terms & Conditions</a></li>

				</ul>
			</nav>
		</div>
		<div class="col2">
			<div id="newsletter_wrapper">
				<div class="newsletter"> <span class="title">Newsletter</span>
					<p>Sign up here and get the latest first</p>

					<form action="/newsletter-callback" method="post" class="clearfix">
						<input type="email" class="email" name="newsletter">
						<input type="submit" value="Submit" class="ir btn submit">
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="copyright">

		<p>Copyright  ©  2010 all rights reserved</p>
	</div>
</div>
</footer>

 

So there may be some HTML5 Features in there somewhere. It could also be a jQuery plugin. As you can see there are 2 footers, which one is the fluid footer fixed to the page, the other being the one that "unfolds" when you reach the end of the page. It may be like i said some jQuery, or might just be some simple javascript.

There are 2 javascript links in the head tag which you may wanna check out.

Ash

It must be jQuery because when I disabled javascript the top footer wasn't sticking to the bottom. IE7 without ActiveX shows the footer items vertically and looks a mess.

I doubt you'll find a tutorial for this. It's basically a jquery script for a fixed footer however it is set to stop at a certain height in the page whilst revealing the footer as you scroll down.

 

You'd need to tweak an existing script for this.

I was quite interested in this fixed/fluid footer, so I played about a bit and came up with (hopefully) a solution. In addition to replicating the fixed/fluid functionality, the footer is sticky even when js is turned off. Tested in FF3.6, SF5, GC5, OP10, IE7+8

 

To do: there's a small jump when scrolling at slow speed that needs to be sorted

Done.

 

Demo files attached.

 

 

You can change the height of either footer in the css and jquery will pick it up.

Even though it's a cool technique I personally never liked those, makes me feel uncomfortable that the page is lower, cut and it feels like an ad.

 

But anyway thanks muchly for sharing Rogan Josh

You're welcome! I agree with you about its questionable use in the wild, but I hadn't come across it before and wanted to understand how it worked. So I messed about with different approaches and this one seems to work well.

Nice work Mr Rogan Josh

 

plus 1 from me

thanks mteam!

Rogan, i didn't find the attachments...

 

could you send a link for it?

Hi Rogan,

 

I couldn't find the attachment for the Fluid/fixed footer effect. Do you still have it? Please send me an email if you do, would help me a lot!

 

Thanks!

yes, please if you still have the file send us

 

Thanks a lot