How can I make the <div> invisible during a scroll

asmithDeveloper
asmithDeveloper used Ask the Experts™
on
I'm working with an interesting jQuery script that positions the footer at the bottom of the page. The code looks like this:


       <script type="text/javascript">
         
           $(window).bind("load", function() {

           var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

               positionFooter();

               function positionFooter() {

                   footerHeight = $footer.height();
                   footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";

                   if (($(document.body).height() + footerHeight) < $(window).height()) {
                       $footer.css({
                           position: "absolute"
                       }).animate({
                            top: footerTop
                       })
                   } else {
                       $footer.css({
                           position: "static"
                       })
                   }

               }

               $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

           });         
    </script>

As the script executes, the footer <div> moves visibly down the page until it sticks to the bottom of the page.

My question is this: How can I modify the code to turn off visibility during the scroll and the turn it on after the div reaches the bottom of the page?

Thanks for any help with this. I'm new to jQuery.    
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Do you mean something like this?
<html>
<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
          
$(function() {//Doc ready rather that window load

	var footerHeight = 0,
	footerTop = 0,
	$footer = $("#footer");

	positionFooter();
	/**
	 * Added hide parmenter
	 * @param bool hide default false
	 */
	function positionFooter(hide) {
		//If we want to hide footer
		if(hide){
			$footer.hide();
		}
		
		footerHeight = $footer.height();
		footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";
		
		if (($(document.body).height() + footerHeight) < $(window).height()) {
			$footer.css({
				position: "absolute"
			}).animate({
				top: footerTop
			})
		} else {
			$footer.css({
				position: "static"
			});
		}
		//If we have hidden it, show it
		if(hide){
			$footer.show();
		}
	   
	}

	$(window)
	.scroll(function(){//Use anon function to pass parmenter
		 positionFooter(true)
	})
	.resize(positionFooter);

});          
    </script>
</head>
<body>
	<div style="height:1500px">Big div</div>
	<div id="footer">This is the footer</div>
</body>
</html>

Open in new window

Author

Commented:
Cool!. Thanks for the lesson.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial