Currently, I have a holding page for my website that is functioning as desired. It features some Vegas-style background fades and a simple navigation bar at the bottom fixed to the page with the following CSS:
Position: absolute; bottom: 0;
You can view the current version of the site here: www.gigabang.co
I am looking to enhance the user experience by having the site load to the existing page and allow users to scroll down to reveal more content. I want the footer to initially stick to the bottom of the browser window upon loading, but then adhere to the top of the page after scrolling.
Although I have implemented some rudimentary stickUp jQuery code to achieve this functionality, I had to remove the 'position: absolute' property in order for it to work properly.
To see an example of this in action, you can visit this test page: Test Page
Is there a way to accomplish this effect without conflicting with the existing Vegas jQuery code? Any insights or suggestions would be greatly appreciated!
Thank you for your assistance! -m
Below is the stickUp script currently being used:
<script src="gigabang/stickUp.js"></script>
<script type="text/javascript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the 'footer' class
$('.footer').stickUp();
});
});
</script>
And here is the Vegas slideshow script causing conflicts:
<!--<script type="text/javascript">
$(function() {
$.vegas('slideshow', {
delay: 8000,
backgrounds:[
{ src:'gigabang/WEBBG2.jpg', fade:1000 },
{ src:'gigabang/WEBBG5b.jpg', fade:1000 },
{ src:'gigabang/WEBBG6.jpg', fade:1000 },
{ src:'gigabang/WEBBG1.jpg', fade:1000 } ]
});$.vegas('overlay', {
src:'gigabang/vegas/overlays/13.png'
});
});
</script>