Показывать div при прокрутке после 800px: jQuery и CSS

Быстрый ответ

Чтобы визуализировать элемент div после прокрутки страницы на 800 пикселей, воспользуйтесь обработчиком события scroll, описанном на JavaScript. Меняйте видимость данного элемента с помощью CSS и специального класса, исключая использование jQuery:

// Наблюдаем за событием прокрутки страницы
window.addEventListener('scroll', () => {
  const divElement = document.getElementById('myDiv');
  if (window.pageYOffset > 800) {
    divElement.classList.add('show');
  } else {
    divElement.classList.remove('show');
  }
});

#myDiv { display: none; }
.show { display: block; position: fixed; top: 0; }

Убедитесь, что в вашем коде 'myDiv' соответствует ID элемента, а свойство display меняется в соответствии с правилами CSS-класса .show.

Плавные переходы

Для плавного появления и исчезновения div элемента добавьте в CSS-файл следующие переходы:

#myDiv {
  transition: opacity 0.5s, top 0.5s;
}

Важность полосы прокрутки

Если количество контента на странице недостаточно для активации полосы прокрутки, событие scroll не произойдет. Обеспечьте появление прокрутки с помощью следующих CSS-свойств:

body, html {
  min-height: 1001px; /* Гарантированное появление полосы прокрутки */
}

Подробнее об этом расскажет наш спикер на видео

Использование Intersection Observer

Альтернативой является использование API Intersection Observer, которое позволяет эффективнее наблюдать за видимостью элементов на странице:

let observer = new IntersectionObserver((entries, observer) => { 
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
}, {rootMargin: "-800px 0px"});

observer.observe(document.querySelector('#myDiv'));

Визуализация

Вообразите документ как высокую здание, которое вы прокручиваете. Ваш div – это световой сигнал, включающийся на высоте 800 пикселей.

Индикатор прокрутки: 🏢
| Прокрутка | Статус Div |
|-----------|------------|
| 0-799px   | Невидим    |
| 800px+    | Видим      |

Практические соображения

Застывание в поле зрения

Для того чтобы div оставался 'заштопан', сделайте его фиксированным после прокрутки до 800px:

.show {
  display: block;
  position: fixed; 
  top: 0;
}

Регулирование z-index

Если макет сайта представляет собой сложное наложение элементов, регулируйте их порядок с помощью z-index:

.show {
  z-index: 1000;
}

Селекторы элементов

Используйте уникальные ID или классы для избегания конфликта стилей с остальными элементами на странице:

#uniqueDiv { /* Не с чем путать, уникален во всем */ }

Ориентация на чистый JavaScript

Если вы предпочитаете работать чисто на JavaScript, представляем вам решение без использования jQuery:

// Отслеживаем каждое событие прокрутки
window.addEventListener('scroll', function() {
  const div = document.getElementById('uniqueDivId');
  if (window.scrollY > 800) {
    div.classList.add('visible');
  } else {
    div.classList.remove('visible');
  }
});

#uniqueDivId { display: none; }
.visible { /* Теперь я в поле зрения. */ }

Обработка display: none

Элемент с display: none не занимает видимого пространства на странице. Чтобы получить информацию о его позиции, временно измените свойство display:

// Меняем видимость для определения позиции
const prevDisplay = myDiv.style.display;
myDiv.style.display = 'block';
const parentOffset = myDiv.offsetParent.offsetTop;
myDiv.style.display = prevDisplay;

Визуализация без jQuery

Используйте свойства CSS для изменения opacity, чтобы сделать элемент невидимым без применения jQuery:

.show {
  opacity: 1; /* Полностью видим */
}

#myDiv {
  opacity: 0; /* Совершенно невидим */
  transition: opacity 1s; /* Плавная смена прозрачности */
}

Демонстрационные примеры

Представьте работающий пример или демонстрируйте код в действии на платформах вроде JSFiddle или CodePen.

Избавляемся от дребезга

Улучшите производительность кода, удалив ненужные вызовы обработчика прокрутки, воспользовавшись функцией debounce из библиотеки lodash:

// Сглаживаем частые события прокрутки
window.addEventListener('scroll', _.debounce(() => {
  // Ваш код здесь
}, 100));

Полезные материалы

1. Документация jQuery по событию scroll — для дополнительного понимания метода scroll().
2. Интерактивное взаимодействие со скроллом на w3schools — для практического опыта.
3. Статьи о debounce и throttle на CSS-Tricks — об оптимизации обработки событий прокрутки.
4. Intersection Observer API на MDN — для реализации ленивой загрузки и бесконечной прокрутки.
5. Обработка событий прокрутки на javascript.info — для работы на чистом JavaScript.
6. Библиотека AOS для анимации при прокрутке — для создания анимаций, срабатывающих при прокрутке.