Прилипчивая реализация CSS

внешний интерфейс CSS
Прилипчивая реализация CSS

Такую функцию «наверх» часто можно увидеть в некоторых документах или статьях, и есть два конкретных взаимодействия.

  1. Он появляется только при прокрутке на определенное расстояние, вернитесь наверх, чтобы снова скрыть
  2. Нажмите, чтобы вернуться наверх

Например LuLu UI

image-20210731115558187

Нажимается снова, и снова прокручивается, похоже, придется использовать помощьJavaScriptНу, на самом деле, это не обязательно.Поразмыслив, я могу добиться такого интерактивного эффекта с помощью небольшого количества CSS.Давайте посмотрим.

1. Залипающая прокрутка

нужно здесьнемного воображения. Например, появляется только после прокрутки на определенное расстояние, немного похоже?CSS stickyКонцепция чего-либо? Обычно эффект перекатывания липкий, но на определенное расстояние, а затем фиксируется в положении, как объяснил MDN.

Элемент позиционируется в соответствии с обычным потоком документов, затем относительно своего *ближайшего предка по прокрутке* иcontaining block(ближайший предок на уровне блока), включая элементы, связанные с таблицей, на основеtop, right, bottom, а такжеleftзначение для смещения. Значение смещения не влияет на положение любых других элементов.

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

<a class="back"></a>
<article>
...很多内容
</article>

Обратите внимание, что.backПоместите его впереди, иначе он не вызовет липкое позиционирование, а затем дайте.backплюс липкое позиционирование

.back{
  position: sticky;
  display: block;
  top: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
}

из-за здесьtop0, поэтому кнопка «Назад» застревает вверху во время прокрутки, как показано ниже.

Kapture 2021-07-31 at 12.48.52

В это время, еслиtopКак насчет изменения на отрицательное значение?

.back{
  /**/
  position: sticky;
  top: -30px;
}

Как видите, кнопка выйдет за пределы экрана-30pxМесто фиксируется следующим образом

Kapture 2021-07-31 at 13.20.48.gif

Далее ставим.backСмещение вниз на всю дистанцию ​​экрана, т.е.100vh

.back{
  /**/
  position: sticky;
  top: -30px;
  transform: translateY(100vh);
}

Таким образом, он очень близок к нужному нам эффекту, но только его часть проявляется в конце, как показано ниже.

Kapture 2021-07-31 at 14.47.30

Принцип следующий

Kapture 2021-07-31 at 14.22.29

Наконец, поставьтеtopустановить меньше, пока.backможет появиться полностью, например, установка-60px

.back{
  /**/
  position: sticky;
  top: -60px;
  transform: translateY(100vh);
}

Kapture 2021-07-31 at 15.38.48

Это в основном сделано, но есть еще некоторые проблемы, тогда смотрите вниз

Во-вторых, обработка нижнего правого угла

Вышеупомянутая реализация на самом деле имеет две проблемы с макетом, которые необходимо оптимизировать:

  1. Сама кнопка занимает немного места
  2. Кнопка обычно находится в правом нижнем углу

image-20210731161252443

Как правило, чтобы элемент не занимал место, можно придумать метод, который заключается в установке абсолютного позиционирования. Но здесь из-за настройкиposition: sticky, так что определенно больше нельзя устанавливать абсолютное позиционирование. В дополнение к этому мы также можем использовать floatfloat, который может легко решить две вышеупомянутые проблемы макета

.back{
  /***/
  float: right
}

Установка правого плавающего положения имеет два преимущества: во-первых, выйти из потока документа, не влияя на высоту, а во-вторых, добиться эффекта смещения вправо. Фактический эффект заключается в следующем.

Kapture 2021-07-31 at 16.19.29

На самом деле тут еще есть небольшая проблема, когда в шапке много текста, хорошо виден правильный эффект обтекания, вот так

image-20210731162943407

Как с этим бороться?Очень просто,добавьте минусmarginпросто хорошо

.back{
  /***/
  float: right；
  margin-top:-50px;/*自身高度*/
}

Но появилась новая проблема, и кнопка внизу снова подтекает

image-20210731163659805

из-заtopБылstickyЗанято, теперь изменение положения кнопки может полагаться только наtransform, здесь вы можете использоватьcalcрассчитать, покаtopТакже уменьшите свой рост соответственно

.back{
  /***/
  float: right；
  margin-top:-50px;/*自身高度*/
  top: -110px; /*60 + 50*/
  transform: translateY(calc(100vh + 50px));
}

Kapture 2021-07-31 at 16.45.39

Идеально!

3. Вернуться к началу

Вернуться наверх легче, обычноhref='#'Достичь можно, конечно, для плавной прокрутки можно добавитьscroll-behavior: smooth

html, body { 
  scroll-behavior:smooth; 
}

Фактический эффект выглядит следующим образом

Kapture2021-07-31at17.20.01

Наконец, полный код прилагается, очень мало

html,body{
  scroll-behavior: smooth;
}
.back{
  position: sticky;
  float: right;
  top: -110px;
  margin-top: -50px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(calc(100vh + 50px));
}

HTML нужно только добавить тег в начале

<body>
  <a class="back" href="#"></a><!--添加再这里就行了-->
  <article>
  ...很多内容
  </article>
</body>

доступный онлайн-кодback-top (codepen.io)

4. Резюме и объяснение

В приведенном выше примере используется липкий CSS для реализации небольшого взаимодействия, которое автоматически отображает кнопку возврата. Сам по себе объем кода не сложен. На самом деле, это немного воображения. Связывание похожих эффектов и попытки большего количества могут привести к различным решениям. Ниже приведены основные моменты реализации:

  1. CSS sticky может добиться эффекта липкой прокрутки, вы можете установить отрицательные значения
  2. transformY (100vh) может быть смещен на 1 высоту экрана, не затрагивая заполнитель
  3. Поплавок может вырваться из потока документов, не влияя на высоту
  4. Отрицательные поля могут свести на нет эффект плавающего переноса.
  5. scroll-behavior: smooth может обеспечить плавную прокрутку
  6. Совместимость зависит от липкого, не совместимого с IE

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

Категории