hide footer in a specific fluid page with JS

Question

First of all, what do I mean by "fluid page"? I mean one long page that is broken into id sections which show those id's as pages. It's most basic structure looks like this:

    <div class="mainnav">
        <ul>
            <li><a href="#page1">PAGE 1</a></li>
            <li><a href="#page2">PAGE 2</a></li>
            <li><a href="#page3">PAGE 3</a></li>
            <li><a href="#page4">PAGE 4</a></li>
            <li><a href="#page5">PAGE 5</a></li>
        </ul>
    </div>
    <div id="page1" class="container-fluid"> Page 1 content </div>
    <div id="page2" class="container-fluid"> Page 2 content </div>
    <div id="page3" class="container-fluid"> Page 3 content </div>
    <div id="page4" class="container-fluid"> Page 4 content </div>
    <div id="page5" class="container-fluid"> Page 5 content </div>

    <!-- sticky footer -->
    <div class="footer"></div>

So as you can see whenever the you hit the menu item for that ID, the content slides up until it reaches that Id and it displays the content as if it was a different page. Easy enough!

My problem is, I have the footer sticky and I did that so that when you click to the next page (ID) the footer is still there, EXCEPT, I don't want it to show when #page1 is selected.

I attempted to build a small JS, but my JS is less than great. Here is my attempt

<script type="text/javascript">
    function hideFooter(){
        $("#homeContainer").css(display:none);
    }

         $(document).ready(function() {
             hideFooter();
    });
</script>

Obviously, not working. Here is a FIDDLE that you can use.

Any ideas!?

Answer 1

You just need to add a handler on the .mainnav a tags and toggle as appropriate:

$(document).ready(function() {
    Viewport();
    $(window).bind('resize', Viewport);

    $('.mainnav a').click(function(){
        if (this.href.indexOf('#page1') == -1) {
            $('.footer').show();
        } else {
            $('.footer').hide();
        }
    });
});

http://jsfiddle.net/taHCv/4/