Как при скролле вниз убрать 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 ( 
  /> < console.log(this.sticky); this.ref.current.style.display = "flex"; >> > add message < console.log(this.sticky); this.ref.current.style.display = "none"; >> > remove message //получается сделать через событие  < if (this.ref.current.getBoundingClientRect().top < 0) < this.ref.current.classList.add("sticky"); >>> > add sticky 
 ); > > 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 , иначе это приведет к просадке производительности Вашего приложения.

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

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

Для внедрения на свой сайт вам необходимо подключить библиотеку 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; >);

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

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

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

Анимация градиента с плагином granim.js

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

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

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

1. Общие положения.
   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–2023 Все права защищены

         Как скрыть/показать панель уведомлений при прокрутке

         

         От автора: в предыдущем уроке мы узнали, как скрыть и показать липкий заголовок при прокрутке. Сегодня давайте создадим нечто подобное: липкий заголовок, верхняя часть которого (заголовок панели уведомлений) исчезнет при прокрутке вниз и появится при прокрутке вверх.

         Что мы создаем?

         Ссылка на предыдущий урок. Вот что мы собираемся создать в этом уроке (прокрутите, чтобы проверить поведение):

         Начните с разметки страницы

         Заголовок будет состоять из двух частей: верхней и нижней.

         В верхней части будет специальное уведомление о бесплатной доставке и контактная информация.

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

         

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

         

         Помимо заголовка, чтобы создать прокрутку для эффекта тестирования, мы также укажем несколько фиктивных разделов. Вот разметка заголовка:

         Определим несколько вспомогательных классов

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

         Чтобы стилизовать заголовок, нам понадобятся несколько вспомогательных классов. Вместо того, чтобы включать фреймворк CSS, такой как Tailwind, давайте сами определим эти классы:

         padding : 0 15px ;
         max-width : 100% ;
         display : flex ;
         .flex-column < flex-direction : column ; .align-items-center < align-items : center ; .justify-content-between < justify-content : space-between ; .text-center < text-align : center ; @media (min-width: 600px) < padding : 0 30px ; flex-direction : row ; @media (min-width: 900px) < flex-direction : row ;

         Укажем стили заголовков

         На маленьких экранах (

         /*CUSTOM VARIABLES HERE*/
         .page-header .header-top,
         .page-header .header-bottom < position : fixed ; transition : all 0.4s ; .page-header .header-top < padding : 10px 0 ; background : var ( --pink ) ; .page-header .header-bottom < padding : 20px 0 ; background : var ( --white ) ; box-shadow : 0 -2px 10px rgb ( 0 0 0 / 15% ) , 0 5px 5px rgba ( 0, 0, 0, 0.15 ) ; .page-header .header-bottom .menu < position : absolute ; opacity : 0 ; visibility : hidden ; padding : 15px ; border-top : 1px solid whitesmoke ; transform : translateY ( 20px ) ; box-shadow : 0 5px 5px rgba ( 0, 0, 0, 0.15 ) ; background : var ( --white ) ; transition : all 0.2s ; .page-header .header-bottom .menu li:not(:last-child) < margin-bottom : 15px ; @media (min-width: 900px) < .page-header .header-bottom .menu < position : static ; padding : 0 ; border : none ; margin-right : 80px ; background : none ; box-shadow : none ; .page-header .header-bottom .menu li:not(:last-child) < margin : 0 30px 0 0 ;

         Добавим JavaScript

         Для следующего шага добавим поведение в заголовок.

         Рассчитаем Offsets

         Когда DOM будет готов и когда мы изменим размер окна браузера, сработает функция calculateOffsets(). Эта функция будет отвечать за установку значения свойства top нижней части заголовка и значения свойства padding-top нашего body. Эти действия необходимы, поскольку обе части заголовка являются фиксированными элементами, поэтому они полностью удалены из обычного потока документов. Вот необходимый код JavaScript:

         JavaScript
         calculateOffsets ( ) ;
         window . addEventListener ( «resize» , ( ) = > < calculateOffsets ( ) ; function calculateOffsets ( ) < const headerTopHeight = headerTop . offsetHeight ; const headerBottomHeight = headerBottom . offsetHeight ; headerBottom . style . top = ` $ < headerTopHeight >px ` ;
         body . style . paddingTop = ` $ < headerTopHeight + headerBottomHeight >px ` ;

         Переключим меню

         Каждый раз, когда мы нажимаем на кнопку-переключатель, видимость меню меняется. Если меню скрыто, то оно появится, и наоборот. Вот соответствующий код JavaScript:

         JavaScript
         const menu = document . querySelector ( «.page-header .header-bottom .menu» ) ;
         const toggleMenu = document . querySelector (
         «.page-header .header-bottom .toggle-menu»
         toggleMenu . addEventListener ( «click» , ( ) = > < menu . classList . toggle ( "is-visible" ) ; .page-header .header-bottom .menu < transition : all 0.2s ; .page-header .header-bottom .menu.is-visible < opacity : 1 ; visibility : visible ; transform : none ;

         Переключим заголовок панели

         Теперь о главной цели этого урока. Каждый раз, когда мы прокручиваем вниз, полоса заголовка должна плавно исчезать и возвращаться в поле зрения, когда мы прокручиваем назад. Чтобы реализовать это, мы будем следовать тому же шаблону, что и в предыдущем руководстве, поэтому мы заимствуем из него приличное количество кода.

         По поводу функциональности:

         По мере прокрутки вниз объект body получит класс scroll-down. На этом этапе верхняя панель будет анимирована вверх и станет скрытой. При этом нижняя часть будет анимирована выше и займет пустое место, плюс мы пересчитаем значение свойства padding-top.

         По мере прокрутки вверх объект body получит класс scroll-up. Обратите внимание, что нам этот класс не понадобится, но он будет в нашем распоряжении, если мы захотим позже изменить демонстрационные стили с помощью CSS. На этом этапе мы удалим преобразования CSS из частей заголовка и снова пересчитаем значение свойства padding-top.

         Если мы прокрутим страницу вверх, она потеряет свой scroll-up.

         Вот (довольно обширный!) Код JavaScript для обработки всего этого:

         Как добавить класс при прокрутке страницы

         Разберем такую задачу: нужно добавить класс заданному элементу (например, header) при скролле страницы.

         Приступим. Такую задачу мы можем решить с помощью JavaScript. Я пропишу два варианта решения — на чистом js и с использованием библиотеки jquery.

         Добавляем класс элементу при скролле страницы (Чистый JavaScript):

         //Записываем, сколько проскроллено по вертикали let scrollpos = window.scrollY const header = document.querySelector("header") //Сколько пикселей нужно проскролить, чтобы добавить класс. Можете изменить значение const scrollChange = 1 //Функция, которая будет добавлять класс const add_class_on_scroll = () => header.classList.add("bg-red") //Отслеживаем событие "скролл" window.addEventListener('scroll', function() < scrollpos = window.scrollY; //Если прокрутили больше, чем мы указали в переменной scrollChange, то выполняется функция добавления класса if (scrollpos >= scrollChange) < add_class_on_scroll() >>)

         Давайте улучшим этот код и сделаем так, что если проскролили меньше 1px, то класс удаляется:

         let scrollpos = window.scrollY const header = document.querySelector("header") const scrollChange = 1 const add_class_on_scroll = () => header.classList.add("bg-red") const remove_class_on_scroll = () => header.classList.remove("bg-red") window.addEventListener('scroll', function() < scrollpos = window.scrollY; if (scrollpos >= scrollChange) < add_class_on_scroll() >else < remove_class_on_scroll() >>)

         Здесь мы добавили новую функцию remove_class_on_scroll, которая удаляет определенный класс из выбранного элемента. Выполняться эта функция будет в том случае, если пользователь не проскролил 1px от начала страницы.

         Теперь то же самое напишем на jquery:

         var header = $(".header"); var scrollChange = 1; $(window).scroll(function() < var scroll = $(window).scrollTop(); if (scroll >= scrollChange) < header.addClass('bg-red'); >else < header.removeClass("bg-red"); >>);

         Здесь мы прописали тоже самое, если пользователь прокрутил больше 1px страницы, то header мы добавляем класс bg-red. Если меньше прокрутил — удаляем класс.

         Вот так легко можно добавить или удалить класс любому элементу при скролле страницы.

         Похожие публикации:

         1. Бот максим как пользоваться
         2. Как описать дизайн сайта примеры
         3. Как поставить русификатор на игру в стиме
         4. Как скачать trello на компьютер