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>
##----------------------------------##
##--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
Post a Comment