Как при скролле вниз убрать header react

Как сделать плавающий блок? React

Нужно сделать «плавающий» div с сообщением, без jQuery, чтобы при прокрутке ниже header’a это сообщение крепилось в верху экрана. Без ref’ов, на хуках, с функциональными компонентами. JS:

import React, < useState, useRef >from "react"; import "./styles.css"; import < observable, computed >from "mobx"; import < observer >from "mobx-react"; const Header = () => ( Header
 
 ); const Message = React.forwardRef((props, ref) => < return ( className="message"> Message
 
 ); >); const Space = () => ; @observer class App extends React.Component < constructor(props) < super(props); this.ref = React.createRef(); >@observable sticky = this.ref.current.getBoundingClientRect(); someMethod() <> render() < return (   />   //получается сделать через событие  
 ); > > export default App;

* < margin: 0; padding: 0; >.App < font-family: sans-serif; text-align: center; >.header < height: 100px; background: blue; display: flex; justify-content: center; align-items: center; >.space < height: 500px; >.message < display: none; background: green; height: 70px; justify-content: center; align-items: center; >.sticky

Думал, что нужно взять координаты сообщения и когда верхние будут отрицательными добавлять CSS-класс с position: fixed . ссылка на CodeSandBox

Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
задан 15 июл 2020 в 16:26
saymurrmeow saymurrmeow
74 9 9 бронзовых знаков

пробовал просто назначить событие на клик которое, назначало бы класс, если пользователь уже прокрутил сообщение все работает. Не понимаю как мне следить за координатами сообщения без какого то события

15 июл 2020 в 16:39
исправил в примере
15 июл 2020 в 16:48

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вручную делать sticky-элемент с помoщью JS довольно муторно и особого смысла не имеет так как большинство современных браузеров уже давно поддерживают position sticky:

Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока.

Отвечая на Ваш вопрос:

// простой набросок подхода const headerRef = useRef() const scrollHandler = () => < const bcr = headerRef.current.getBoundingClientRect() console.log(bcr) >useEffect(() => < window.addEventListner("scroll", scrollHandler, false) return () =>window.removeEventListner("scroll", scrollHandler, false) >, []) return >Метод getBoundingClientRect() в сочетании с событием onscroll даст вам возможность понять где именно в каждый конкретный момент находиться нужный вам элемент относительно viewport'a.

ВАЖНО: Вам нужно использовать debounce что бы ограничить количество срабатываний функции scrollHandler , иначе это приведет к просадке производительности Вашего приложения.

ScrollView¶

Компонент, оборачивающий платформу ScrollView и обеспечивающий интеграцию с системой сенсорной блокировки «responder».

Помните, что для работы ScrollView должны иметь ограниченную высоту, поскольку они содержат дочерние элементы неограниченной высоты в ограниченном контейнере (с помощью взаимодействия прокрутки). Чтобы привязать высоту ScrollView , либо задайте высоту представления напрямую (не рекомендуется), либо убедитесь, что все родительские представления имеют ограниченную высоту. Забыв передать вниз по стеку представлений, вы можете столкнуться с ошибками, которые быстро отлаживаются с помощью инспектора элементов.

Пока не поддерживает блокировку другими содержащимися ответчиками этого вида прокрутки.

ScrollView отображает все свои дочерние компоненты react одновременно, но это имеет недостаток производительности.

Представьте, что у вас есть очень длинный список элементов, которые вы хотите отобразить, возможно, содержимое нескольких экранов. Создание JS-компонентов и нативных представлений для всего сразу, большая часть которого может даже не отображаться, приведет к медленному рендерингу и повышенному использованию памяти.

Именно здесь в игру вступает FlatList . FlatList лениво отображает элементы, когда они вот-вот появятся, и удаляет элементы, которые прокручиваются далеко за пределами экрана, чтобы сэкономить память и время обработки.

FlatList также удобен, если вы хотите отобразить разделители между элементами, несколько колонок, бесконечную прокрутку, или любые другие функции, которые он поддерживает из коробки.

Пример¶

пропсы¶

View Props¶

StickyHeaderComponent ¶

React-компонент, который будет использоваться для рендеринга липких заголовков, должен использоваться вместе с stickyHeaderIndices . Вам может понадобиться установить этот компонент, если ваш липкий заголовок использует пользовательские преобразования, например, когда вы хотите, чтобы ваш список имел анимированный и скрываемый заголовок. Если компонент не был указан, будет использован компонент по умолчанию ScrollViewStickyHeader .

Type
component, element

alwaysBounceHorizontal

При значении true представление прокрутки отскакивает по горизонтали, когда достигает конца, даже если содержимое меньше, чем само представление прокрутки.

Type	Default
bool	true when horizontal= false otherwise

alwaysBounceVertical

При значении true представление прокрутки отскакивает по вертикали, когда достигает конца, даже если содержимое меньше, чем само представление прокрутки.

Type	Default
bool	false when vertical= true otherwise

automaticallyAdjustContentInsets

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

Type	Default
bool	true

automaticallyAdjustKeyboardInsets

Управляет тем, должен ли ScrollView автоматически корректировать свои contentInset и scrollViewInsets при изменении размера клавиатуры.

Type	Default
bool	false

automaticallyAdjustsScrollIndicatorInsets

Управляет тем, должна ли iOS автоматически регулировать вставки индикатора прокрутки. См. документацию Apple по этому свойству.

Type	Default
bool	true

bounces

При значении true вид прокрутки отскакивает, когда достигает конца содержимого, если содержимое больше, чем вид прокрутки вдоль оси направления прокрутки. При значении false отключает все отскоки, даже если пропс alwaysBounce* имеет значение true .

Type	Default
bool	true

bouncesZoom

Если true , жесты могут управлять масштабированием, превышая min/max, и масштаб будет анимирован до min/max значения в конце жеста, в противном случае масштаб не будет превышать пределы.

Type	Default
bool	true

canCancelContentTouches

Если false , после начала отслеживания не будет предприниматься попытка перетаскивания, если прикосновение движется.

Type	Default
bool	true

centerContent

Если true , представление прокрутки автоматически центрирует содержимое, когда содержимое меньше границ представления прокрутки; когда содержимое больше границ представления прокрутки, это свойство не имеет эффекта.

Type	Default
bool	false

contentContainerStyle ¶

Эти стили будут применены к контейнеру содержимого представления прокрутки, в который обернуты все дочерние представления. Пример:

 1 2 3 4 5 6 7 8 9 10 11

return ( ScrollView contentContainerStyle=styles.contentContainer> >/ScrollView> ); // . const styles = StyleSheet.create( contentContainer:  paddingVertical: 20, >, >);

contentInset

Величина, на которую содержимое представления прокрутки отступает от краев представления прокрутки.

Type	Default
object:

contentInsetAdjustmentBehavior

Это свойство определяет, как вставки безопасной области используются для изменения области содержимого представления прокрутки. Доступно в iOS 11 и более поздних версиях.

Type	Default
enum( ‘automatic’ , ‘scrollableAxes’ , ‘never’ , ‘always’ )	‘never’

contentOffset ¶

Используется для ручной установки начального смещения прокрутки.

Type	Default
Point

decelerationRate ¶

Число с плавающей точкой, определяющее, насколько быстро замедляется представление прокрутки после того, как пользователь поднимает палец. Вы также можете использовать строковые сокращения «normal» и «fast» , которые соответствуют базовым настройкам iOS для UIScrollViewDecelerationRateNormal и UIScrollViewDecelerationRateFast соответственно.

normal 0,998 на iOS, 0,985 на Android.
fast , 0,99 на iOS, 0,9 на Android.

Type	Default
enum( ‘fast’ , ‘normal’ ), number	‘normal’

directionalLockEnabled

При значении true ScrollView будет пытаться зафиксировать только вертикальную или горизонтальную прокрутку при перетаскивании.

Type	Default
bool	false

disableIntervalMomentum ¶

При значении true представление прокрутки останавливается на следующем индексе (по отношению к позиции прокрутки при отпускании) независимо от скорости жеста. Это можно использовать для постраничной навигации, когда страница меньше ширины горизонтального ScrollView или высоты вертикального ScrollView .

Type	Default
bool	false

disableScrollViewPanResponder ¶

При значении true , стандартный JS-респондер панорамирования на ScrollView отключается, и полный контроль над касаниями внутри ScrollView остается за его дочерними компонентами. Это особенно полезно, если включен snapToInterval , поскольку он не следует типичным шаблонам касаний. Не используйте эту функцию в обычных ScrollView без snapToInterval , так как это может привести к неожиданным касаниям при прокрутке.

Type	Default
bool	false

endFillColor

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

fadingEdgeLength

Обесцвечивает края содержимого свитка.

Если значение больше 0 , края затухания будут установлены в соответствии с текущим направлением и положением прокрутки, указывая, есть ли еще содержимое для показа.

Type	Default
number	0

horizontal ¶

Если true , дочерние элементы представления прокрутки располагаются горизонтально в ряд, а не вертикально в столбец.

Type	Default
bool	false

indicatorStyle

Стиль индикаторов прокрутки.

default то же самое, что и black .
black , индикатор прокрутки — black . Этот стиль хорош на светлом фоне.
white , индикатор прокрутки — white . Этот стиль хорош на темном фоне.

Type	Default
enum( ‘default’ , ‘black’ , ‘white’ )	‘default’

invertStickyHeaders ¶

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

Type	Default
bool	false

keyboardDismissMode ¶

Определяет, будет ли клавиатура удалена в ответ на перетаскивание.

none , при перетаскивании клавиатура не отключается.
on-drag , клавиатура отключается, когда начинается перетаскивание.

только для iOS

interactive , клавиатура отбрасывается интерактивно при перетаскивании и перемещается синхронно с касанием, перетаскивание вверх отменяет отбрасывание. На Android это не поддерживается и будет иметь то же поведение, что и ‘none’ .

enum( ‘none’ , ‘on-drag’ , ‘interactive’ )

keyboardShouldPersistTaps ¶

Определяет, когда клавиатура должна оставаться видимой после нажатия.

never Нажатие за пределами сфокусированного ввода текста, когда клавиатура поднята, отменяет клавиатуру. Когда это происходит, дети не получают касания.
always , клавиатура не будет автоматически отключаться, и вид прокрутки не будет ловить касания, но дети вида прокрутки могут ловить касания.
handled , клавиатура не будет автоматически отключаться, если касание было обработано детьми вида прокрутки (или перехвачено предком).
false , deprecated, вместо этого используйте ‘never’ .
true , удалено, используйте ‘always’ вместо этого

Type	Default
enum( ‘always’ , ‘never’ , ‘handled’ , false , true )	‘never’

maintainVisibleContentPosition ¶

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

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

Предупреждение 1: Переупорядочивание элементов в прокрутке с включенной функцией, вероятно, приведет к скачкам и заеданиям. Это может быть исправлено, но в настоящее время это не планируется делать. Пока что не переупорядочивайте содержимое любых ScrollView или списков, использующих эту функцию.

Предупреждение 2: Для вычисления видимости используется contentOffset и frame.origin в собственном коде. Окклюзия, трансформации и другие сложности не будут приняты во внимание, чтобы определить, является ли содержимое «видимым» или нет.

Type
object:

maximumZoomScale

Максимально допустимый масштаб масштабирования.

Type	Default
number	1.0

minimumZoomScale

Минимально допустимый масштаб масштабирования.

Скрыть шапку при скролле вниз, но только после 100 пикс прокрутки?

От отлично срабатывает, когда идет прокрутка вниз (скрывается) и вверх (показывается). Но загвоздка, на iOS при незамедлительной прокрутке вверх экран «отскакиевает» и срабатывает скроллдаун, естественно шапка скрывается. Как исправить этот код, чтобы он срабатывал только спустя 100-150 пикселей от верхнего края экрана.Т.е. никакие «отскакивания», которые происходят в рамках этих 100 пикселей сверху не входили в активацию работы скрипта?

Вопрос задан более трёх лет назад
1431 просмотр

Скрытие меню при прокрутке вниз и отображение при прокрутке наверх

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

Для внедрения на свой сайт вам необходимо подключить библиотеку jQuery, затем вставить следующий скрипт, где во второй строке надо написать id или class вашего меню.

Затем в стилях вашего меню нужно добавить следующие параметры (см.ниже).

После этого ваше меню будет прятаться при скролле вниз и снова отображаться при скролле наверх.

.header < position: fixed; top: 0; left: 0; width: 100%; transition: all .3s ease; >.header.out

var header = $('.header'), scrollPrev = 0; $(window).scroll(function() < var scrolled = $(window).scrollTop(); if ( scrolled >100 && scrolled > scrollPrev ) < header.addClass('out'); >else < header.removeClass('out'); >scrollPrev = scrolled; >);

Нам будет приятно

Еще интересное в блоге

Анимация на anime.js иконки добавления в избранное

Вертикальное меню аккордеон на jQuery

Загрузка комментариев.

Будем рады работать именно с вами

Политика конфиденциальности персональных данных

Общие положения.
1. Настоящая Политика конфиденциальности персональных данных (далее — Политика) действует в отношении всех персональных данных, которую компания Keengo (далее – Компания), может получить от пользователя (лица, заполнившего форму обратной связи, использующего другие сервисы официального сайта keengo.ru (далее – Сайт)), в частности в ходе: отправки отзывов или вопросов, заказа услуг, участия в рекламных и/или маркетинговых кампаниях или акциях и/или ином взаимодействии (далее – Услуги).
2. Заполняя форму обратной связи и нажимая кнопку «Согласен/на», расположенную на странице Сайта, на которой размещена форма обратной связи, а равно указывая свои персональные данные при использовании других сервисов Сайта, пользователь выражает согласие с настоящей Политикой и указанными в ней условиями обработки и передачи его персональных данных. Согласие Пользователя на предоставление, обработку и передачу его Персональных данных Компании в соответствии с Политикой является полным и безусловным.
3. Посетителям Сайта следует воздержаться от заполнения формы и/или от использования других сервисов Сайта в случае несогласия (полного или частичного) с Политикой, а равно несогласия предоставить персональные данные.
4. Согласие, даваемое пользователем, включает в себя согласие на сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование, занесение в базы данных (в том числе электронные) Компании, передачу внутри Компании другим отделам и подразделениям или поставщику услуг, обязующегося выполнять условия договора о защите персональных данных, в целях рассылки информационных материалов и/или в рекламных целях (в том числе рассылку приглашений на мероприятия, проводимые/организованные Компанией), трансграничную передачу, блокирование, обезличивание, уничтожение персональных данных.
5. Согласие, даваемое пользователем, распространяется на следующие персональные данные: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон.
6. Срок действия согласия пользователя является неограниченным, однако, пользователь вправе в любой момент отозвать настоящее согласие путём направления письменного уведомления на адрес электронной почты: info@keengo.ru, с пометкой «отзыв согласия на обработку персональных данных».
1. В рамках настоящей Политики под персональными данными пользователя понимаются персональные данные, которые пользователь предоставляет о себе самостоятельно при заполнении формы обратной связи на Сайте, при использовании других сервисов Сайта, при регистрации (создании учётной записи) на Сайте или в процессе использования услуг, предоставляемых Компанией. Соответствующая информация явно обозначена, к ней, в частности отнесены: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон. Иная информация предоставляется пользователем на его усмотрение.
2. Компания исходит из того, что пользователь представляет достоверные персональные данные, а также, что пользователь имеет право предоставить персональные данные.
1. Компания использует средство 1С Битрикс для сбора сведений об использовании Сайта, таких как частота посещения Сайта пользователями, посещенные страницы и сайта, на которых были пользователи до перехода на данный Сайт. 1С Битрикс собирает только IP-адреса, назначенные пользователю в день посещения данного Сайта, но не имя или другие идентификационные сведения.
2. 1С Битрикс размещает постоянный cookie-файл в веб-браузере пользователя для идентификации в качестве уникального пользователя при следующем посещении данного Сайта. Этот cookie-файл не может использоваться никем, кроме 1С Битрикс. Сведения, собранные с помощью cookie-файла, будут храниться на серверах, находящихся в Российской Федерации.
3. Компания использует сведения, полученные через 1С Битрикс, только для обработки и хранения персональных данных.
1. Компания обрабатывает только те персональные данные, которые необходимы для оказания услуг.
2. Персональную информацию пользователя Компании может использовать в следующих целях:
  1. Идентификация стороны в рамках оказания услуги.
  2. Рассылка рекламных и/или маркетинговых материалов Компании, рассылка приглашений на мероприятия, конференции, выставки, проводимые и/или организуемые Компанией, проведение телемаркетинговых компаний.
  3. Проведение статистических и иных исследований, на основе обезличенных данных.
  1. В отношении персональных данных пользователя сохраняется ее конфиденциальность, кроме случаев обработки персональных данных, доступ неограниченного круга лиц к которым предоставлен пользователем либо по его просьбе.
  2. Компания вправе передать персональную информацию пользователя третьим лицам в следующих случаях:
    1. Пользователь предоставил свое согласие на такие действия.
    2. Передача персональных данных организациям, которые оказывают услуги Компании по рассылке рекламных и/или маркетинговых материалов, организации и проведению мероприятий, конференций, выставок, телемаркетингу, обзвону потенциальных клиентов Компании.
    3. Передача необходима для достижения целей, осуществления и выполнения функций, полномочий и обязанностей, возложенных законодательством Российской Федерации на Компанию.
    1. Компания принимает необходимые и достаточные организационные и технические меры для защиты персональных данных пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с персональными данными третьих лиц.
    1. Компания предпринимает разумные меры для поддержания точности и актуальности, имеющихся у Компании персональных данных, а также удаления устаревших и других недостоверных или излишних персональных данных, тем не менее, Пользователь несет ответственность за предоставление достоверных сведений, а также за обновление предоставленных данных в случае каких-либо изменений.
    2. Пользователь может в любой момент изменить (обновить, дополнить, блокировать, уничтожить) предоставленную им персональную информацию или её часть, а также параметры её конфиденциальности путем обращения в Компанию.
    3. Пользователь вправе в любой момент отозвать согласие на обработку Компанией персональных данных путём направления письменного уведомления на электронный адрес: info@keengo.ru с пометкой «отзыв согласия на обработку персональных данных», при этом отзыв пользователем согласия на обработку персональных данных влечёт за собой удаление учётной записи пользователя с Сайта и баз данных Компании, а также уничтожение записей, содержащих персональные данные, в системах обработки персональных данных Компании.
    4. Пользователь имеет право на получение информации, касающейся обработки его персональных данных Компанией.
    1. Блог
    2. Блог о JavaScript
    3. Скрытие меню при прокрутке вниз и отображение при прокрутке наверх
    Keengo · Web Design & Development
    © 2010–2024 Все права защищены
    Похожие публикации: