Как сделать так, чтобы полоса появлялась на странице, выровненной по низу, когда я 250px (ради аргументов) снизу?

Question

Я видел сценарии, в которых меню было зафиксировано в верхней части страницы при прокрутке до определенной точки (пример: http://jsfiddle.net/2rhrc/) с использованием jQuery. Я знаю, что могу выровнять a внизу. Однако могуЯ, используя jQuery, прокручиваю до определенной точки, основанной на нижней части страницы (в моем вопросе я предложил 250px, но это может варьироваться), и моя полоса исчезает и остается неподвижной до дна? Когда я прокручиваю выше, чем250px снизу, полоса исчезнет, ​​но исчезнет, ​​когда я достигну 250px или ниже. Я нашел множество, основывающих измерения сверху страницы, но я не могу найти ни одной снизу.

Я хочу использовать это для отображения панели сообщений «Предыдущая / Следующая» в моем блоге Wordpress.Я не знаю, как лучше всего это сделать, с помощью плагина Wordpress или пользовательского скрипта для моего div и использовать Wordpress для вставкиСледующие / Предыдущие ссылки. Я хотел бы полностью контролировать стиль, поэтому я искал готовые плагины, чтобы увидеть, что можно сделать. Любая помощь будет фантастической.

Чтобы понять, что я имею в виду, см. http://www.buzzingup.com/2011/07/how-to-transfer-your-facebook-photos-to-google-plus/. Я знаю, что он использует jQuery, но я не могу найти используемые плагины.

Answer 1

Основные математические данные, чтобы определить, находитесь ли вы ниже 250 пикселей от нижней части страницы:

$(document).height() - $(window).height() - $(window).scrollTop() < 250

Рабочий пример: http://jsfiddle.net/9xDxE/.

Вам нужно будет решить, что делать, когда страница отображается без полосы прокрутки.

Answer 2

Вы можете использовать обработчик событий scroll, чтобы показать или скрыть позицию fixed div:

jQuery

$(document).scroll(function() {
    if ($(document).height() - $(window).height() - $(window).scrollTop() < 250) {
        $("#bar").fadeIn();
    } else {
        $("#bar").fadeOut();
    }
});

CSS

#bar
{
    display: none;
    position: fixed;
    bottom: 0px;
    background: black;
    height: 50px;
    width: 100%;
}

Нажмите здесь для рабочего примера