скрыть настройки тени заголовка при прокрутке вниз - PullRequest
Новая
       25

скрыть настройки тени заголовка при прокрутке вниз

0 голосов
/ 19 октября 2018

Я использую Rails Framework.

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

Пример: https://media.giphy.com/media/Y0lWILbjEOc5uKqYgD/giphy.gif - тени нет, пока пользователь не прокрутит вниз.

CSS 

nav.navbar {
  font-family: $font-family-headers;
  font-weight: 700;
  padding-right: 20px;
  background-color: $body-bg;
  box-shadow: 0px 1px 5px 1px rgba(0,0,0,.4);

HTML.SLIM 

nav#main-header.navbar.fixed-top.navbar-expand-md[data-user="# 
{current_user ? current_user.name : false}"]
- if t('application.image.use', locale:  :general)

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

1 Ответ

0 голосов
/ 19 октября 2018

На предоставленном вами gif-поле всегда присутствует тень, происходит то, что вторая навигационная панель разваливается, и тень "движется" вверх.

Если вы осмотрите элементы этого сайта, вы увидитечто, когда вы прокручиваете вниз, он добавляет несколько классов (для перехода на второй развал навигационной панели), а затем появляется класс navbar-fixed-active.Когда вы снова прокрутите вверх, этот класс исчезнет.

Я предполагаю, что он использует события прокрутки JS, чтобы выключить этот класс, если scroll == 0, и включить, если scroll! = 0.

Затем, имея или не имея тень, просто вещь CSS, вы можете сделать так, чтобы у элемента было свойство box-shadow, когда какой-то класс присутствует, и не иметь его, когда этого класса нет.

...