Скрыть меню при скроллинге

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

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

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

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

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

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

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

Как просто определить мобильное устройство с помощью Java Script и jQuery

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

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

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

                    Keengo · Web Design & Development
                    © 2010–2019 Все права защищены

                    Есть страница, на которой имеется бесконечный скроллинг и скрипт скрытия/показа меню при скроллинге – https://jsfiddle.net/mariusc23/s6mLJ/31/

                    Проблема заключается в том, что в момент подгрузки контента на странице скрипт считает, что страница была прокручена вверх и, соответственно, меняет класс меню на .nav-down.

                    Please complete the security check to access codepen.io

                    Why do I have to complete a CAPTCHA?

                    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

                    What can I do to prevent this in the future?

                    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

                    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

                    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

                    Cloudflare Ray ID: 54b6eb0f5fddd6d5 • Your IP : 91.146.8.87 • Performance & security by Cloudflare

                    Leave a Reply

                    Ваш адрес email не будет опубликован. Обязательные поля помечены *

                    You may use these HTML tags and attributes:

                    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>