Идеи для создания нижнего колонтитула и поднабора с помощью jQuery?

Question

Привет всем и спасибо заранее за любые рекомендации.

Итак, вот что я пытаюсь сделать. У меня есть фиксированная позиция div (# div_1), которая сидит внизу длинной страницы и является нижним колонтитулом страниц ... пока пользователь не прокрутит весь путь внизу ... тогда появится суб-нижний колонтитул (# div_2) прямо ниже # div_1. Я искал вокруг и не могу найти нужное мне решение.

Снова любая помощь приветствуется.

Answer 1

Вы можете скрыть объекты # div_2 и fadeIn() или show(), когда пользователь прокручивается в нижней части страницы. Используйте следующую функцию, чтобы определить, прокручивается ли пользователь вниз:

$(window).on('scroll', function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $('#div_2').fadeIn(); 
    } else { 
     //code 
    } 
}); 

Answer 2

Вычислено. Я просто держать # div_2 скрытые за # div_1 до тех пор, пока пользователь не достигнет нижнюю часть страницы, а затем натыкаясь снизу на # div_1 до рентгеновских пикселей, чтобы показать subfooter (# div_2)

CSS

#div_2{width:100%;height:50px; background:green;position:fixed;bottom:0; z-index:1} 
#div_1{width:100%;height:95px; background:red; position:fixed; bottom:0; z-index:2} 

JQuery

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $("#div_1").css('bottom','50px'); 
    }else{ 
     $("#div_1").css('bottom','0'); 
    } 
}); 

Answer 3

Это должно заботиться о лишних Dóm событий: Если вы хотите узнать больше о проблемах, проверьте здесь http://ejohn.org/blog/learning-from-twitter

function footer() { 
    //do this in case you already are at the bottom and miss the event 
    showfooter(); 
    $(window).one('scroll', function() { 
     showfooter() 
     setTimeout(showfooter, 200); 
    }); 
} 
function showfooter() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $('#div_2').fadeIn(); 
    } 
}