Custom sticky footer navigation isn't displaying properly

Unfortunately the website is still being built and is on our internal test server. Because of that, only people within the building/company are able to see the website, but I did include screenshots below. I added the code directly to the Teams page. The style section is only there until everything is working. Then it will be moved to the custom.css file.

In the first screenshot, the sticky footer appears below the website’s footer container class div. In the second image the website footer is covering the sticky footer, and it is the same in the third image. Is there a way I can tell the sticky footer to stay within the page’s content area and always be at the bottom of the browser’s visible area but not scroll past or cover the website’s footer?

Here is a mockup of how we would like the sticky footer to behave: https://www.dropbox.com/s/1l4izgu1wibpyya/teams%20page.jpg

https://www.dropbox.com/s/or33xjbhgtopyj3/capture1.png
https://www.dropbox.com/s/cad7ixlm7hpjbvs/capture2.png
https://www.dropbox.com/s/j35gsaamoig7ccc/capture3.png

Thank you for the reply. I will work with our IT department to see if it’s possible to grant you access to the page.

If that doesn’t work, do you know of a WordPress plugin that works well with Enfold that could provide the end result we’re looking for? I don’t mind altering styles if necessary.

The text above is what is all of the code currently on the page. “The Family” is text that describes the content we are using for the page. It is a page showing the teams we sponsor. The sticky footer code starts is just the section below:

<div style="background-color:red; height:80px;">&nbsp;</div>
    <div class="sticky-footer">
            <div class="wrapper">
                <p>Some text here, and some more and some more and a bit more.</p>
            </div><!-- end .wrapper -->
    </div><!-- end .sticky-footer -->

As well as the style section that makes it into a sticky footer:

<style>
	/* Sticky Footer Styles */
	.sticky-footer {
		position: fixed;
		bottom: 10px;
		z-index: 999;
		width:100%;
		background: #ffffff;
		border-top: 1px solid #999999;
		border-bottom: 1px solid #999999;
		padding:5px 10px;
		max-width:1002px;
	}
	
	.sticky-footer p {
		color: #000000;
		text-align:center;
	}
</style>

The rest of the code is just the content that I added so far and can be disregarded. To me it just seems like the sticky footer is jumping outside of the content area of the page, and we would like it to only stay within the content area. We’re planning on going live within the next month, and I will let you know when that happens.

Thank you for the help and sorry for the delayed reply.

That function and CSS fixed the issue with the Enfold footer text being on top of the sticky footer. However, the sticky footer remains at the bottom of the page within the footer and it now displays on every page of the website. Is there a way to call the function only on the team page and have it stay within the page’s content area?

New screenshot: https://www.dropbox.com/s/9a8vx99lp4ul56r/Capture08252014.PNG?dl=0

I found what I believe is the page ID, 3158, by hovering over the “move to trash” link, but the footer still appears on every page and outside of the main content area. Below is the code I used.

function sticky_footer() { 
if(is_page(3158))
?>
<div class="sticky-footer">
	<div class="wrapper">
		<p>Some text here, and some more and some more and a bit more.</p>
	</div><!-- end .wrapper -->
</div><!-- end .sticky-footer -->

</script>
<?php } 

add_action('wp_head', 'sticky_footer');

I tested the site in the latest versions of Firefox, Chrome, and IE11 on Friday and today, Tuesday, but the floating footer appears on all pages even after clearing the cache in Chrome. Unfortunately the website is on a test server that can only be accessed from within the building. We plan on going live soon. I will definitely post a link once it is available. Thank you for continuing to help.

I resolved the issue. I wanted a sticky footer, but I should’ve been looking at a scrollToFixed div. The navigation now stays at the bottom of the browser window and stops when it encounters a defined class. Thank you again for helping me despite not being able to see the website.