Скрыть div до прокрутки в нижней части страницы

Samm спросил: 28 марта 2018 в 04:02 в: javascript

Я делаю веб-страницу (вроде таких страниц выпуска музыки, вот пример), и я бы хотел, чтобы некоторые div были внизу, чтобы не отображаться до тех пор, пока пользователь не прокрутит нижнюю часть страницы, задержка второй или две, затем всплывают. Вид как скрытая особенность. Вы также можете думать об этом как о бесконечном прокрутке, например, когда вы перетаскиваете фид Instagram вверху, он обновляет его и появляются новые сообщения. Это пользовательский опыт, который я ищу, только в моем случае это "конечный свиток", только с некоторым скрытым по умолчанию div.

В настоящее время у меня есть две реализации, ни в коем случае не полностью опыт. Оба используются jQuery Slim.
В обеих реализациях #hidden - это идентификатор моего скрытого по умолчанию div, он имеет style="display: none;" inline, в теге div.

Первый выглядит следующим образом:

$(window).scroll(function() {
var x = $(document).height() - $(window).height() - 20;
if( $(window).scrollTop() > x ) {
  $("#hidden").delay(1000).show(0);
}
else {
  $("#hidden").hide(0);
}
});

Проблема с этим заключается в том, что при отображении div он изменяет высоту документа, поэтому, когда вы добираетесь до нижней части страницы, это мерцает (из-за пересчета высоты документа) и иногда возвращается к скрытию. Действительно плохой пользовательский интерфейс.

Второй выглядит следующим образом:

$(window).scroll(function() {
if( $(window).scrollTop() > 75 ) {
  $("#hidden").delay(1000).show(0);
}
else {
  $("#hidden").hide(0);
}
});

Это избавило от мерцающей проблемы, сохранив порог статический вообще, немного лучший пользовательский опыт, но не очень гибкий, в случае, когда моя страница будет длиннее, мне придется установить новый порог для отображения div.

Ни в одном из над решениями работала delay(1000). Div появился, как только страница прокручивается на дно.

Возможно ли, чтобы этот проект работал?


1 ответ

Есть решение
Jengas ответил: 28 марта 2018 в 04:29

Вы можете попробовать этот код:

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        $("#hidden").delay(1000).show(0);
    }
});
Samm ответил: 28 марта 2018 в 04:51
Благодаря прокручивающей части работает потрясающе! Однако задержка все еще не работает. Див появился сразу.
Jengas ответил: 28 марта 2018 в 04:54
Задержка @Samm не работает с show (). Попробуй использовать fadeIn
Samm ответил: 28 марта 2018 в 04:56
Означает ли это, что мне придется использовать полный JQuery? Я действительно чувствую себя против использования всей библиотеки на такой простой странице, как эта. Есть ли другие обходные пути?
Jengas ответил: 28 марта 2018 в 05:17
@Samm, прочитайте это stackoverflow.com/questions/4508644/…
Jengas ответил: 28 марта 2018 в 05:34
@Samm, вы также можете добавить класс к выбранному элементу (идентификатор или класс) $( "#yourid" ).addClass( "myClass yourClass" );