Изменить внешний вид липкого элемента, когда он достигнет липкой позиции - PullRequest
Новая
       28

Изменить внешний вид липкого элемента, когда он достигнет липкой позиции

0 голосов
/ 29 марта 2020

Я создал нижний элемент div, который присутствует все время при прокрутке сайта. Его «естественная» остановка - сразу после нижнего колонтитула. Когда я делаю прокрутку, а она не в нижнем колонтитуле, она немного прозрачна. Однако то, что я хотел бы сделать, это когда липкий div достигает дна (т.е. его «истинного» положения), затем фон меняется или что-то в этом роде.

Это возможно БЕЗ использования JS или чего-то еще вот так?

Обновлено с помощью скрипки:

https://jsfiddle.net/octvg6mn/

HTML: 

<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>

CSS: 

.largeDiv {
  height: 1500px;
  width: 100%;
  background: #cccccc;

}

.stickyDiv {
  position: sticky;
  bottom: 0px;
  text-align: center;
  background: blue;
  color: white;
  opacity: 0.8;
  padding: 25px;
}

.stickyDiv:hover {
  opacity: 1.0;
}

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

1 Ответ

1 голос
/ 30 марта 2020

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

.largeDiv {
  height: 1500px;
  width: 100%;
  background: #cccccc;
}

.container {
  background:rgba(0,0,255,1);
}

.stickyDiv {
  position: sticky;
  bottom: 0px;
  text-align: center;
  background:rgba(0,0,255,0.5);
  color: white;
  padding: 25px;
}


.stickyDiv:hover {
  background:rgba(0,0,255,1);
}
<div class="container">
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
</div>
...