Auto hide footer on scroll using jquery

##--First include jQuery 1.10 version file--##

##--Place these property in CSS File--##

footer {
    position: fixed;
    bottom:0px;
    height: 40px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-top:2px solid #6ce6d5;
    background: white;
    z-index: 100;
}

#underfooter {
    position: fixed;
    bottom: -44px;
    background: blue;
    width: 100%;
    height: 40px;
    z-index: 90;
}

##----------------------------------##


##------------Content---------------##

<footer> Your Content </footer>
<div id="underfooter"></div>

##----------------------------------##

##---------Place the script--------##
<script>
$(function(){
    $('footer').hide();
    if($(document).height() < $(window).height()){
        $('footer').show();
    }
    $(window).resize(function(){
        console.log("resized");
       if($(document).height() > $(window).height()){
           console.log("hide footer now");
            $('footer').slideUp('slow');
        }
        else{
            $('footer').slideDown('slow');
        }
    });
});



$(window).scroll(function(){
//    console.log($(window).scrollTop(), $(window).height(), $(document).height());
       
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0)
    {
       
            $('footer').slideDown('slow');
            $('#white2').stop().animate({
                bottom:'6px'
            },400);
    }
    else
    {
            $('footer').slideUp('slow');
            $('#white2').stop().animate({
                bottom:'-44px'
            },400);
    }
});




$(document).ready(function() {
    if ($(window).height() >= $(document).height() )
    {
        $('footer').data('size','hide');
    }
    else
    {
        $('footer').data('size','show');
    }
});


</script>

##----------------------------------##

Comments

Popular Posts

Magmi Single and Multiple Category Importer