Исправлен div в соответствии со прокруткой страницы

#css #css-position

#css #css-позиция

Вопрос:

Я разрабатываю магазин для друга, и я хочу исправить «ДОБАВИТЬ В DIV КОРЗИНЫ», когда пользователи прокручивают после него. Поскольку я далек от того, чтобы быть экспертом по CSS, я сталкиваюсь с проблемами с этим.

Я пытался использовать JS, чтобы добавить «position: fixed» в div, но я не могу этого сделать, потому что div имеет относительное положение, и его изменение приводит к исправлению всех элементов div

это ссылка

и это div, который я хочу исправить (идентификатор div равен rightcol):

Я бы также хотел, чтобы div останавливался прямо перед нижним колонтитулом

Заранее спасибо

1. Вам нужно было бы использовать position: fixed; и top:0; right: 0; в div контейнера. Это должно расположить его там, где вы хотите, когда добавление остановки перед нижним колонтитулом потребует изменения свойства css в javascript с использованием события в определенной позиции окна.

2. Вот как это происходит: zckp5iw9gc2imykz-7669317690.shopifypreview.com/products/… Фиксированная позиция не соответствовала ширине контейнера, как это исправить? И какой был бы лучший способ остановить его перед нижним колонтитулом? Добавлять / удалять класс с помощью JS? Спасибо!!

Ответ №1:

Используйте это свойство, чтобы сделать div привязанным к прокрутке

   position: -webkit-sticky;
  position: sticky;
  top: 0;

заголовок вашего веб-сайта также является липким. вы можете использовать те же свойства, что и он работает

1. В какой div я должен добавить эти свойства? Я добавил в #rightcol div, и это не внесло никаких изменений. Chrome также сказал, что «position: -webkit-sticky;» является недопустимым свойством. Спасибо!

2. вы использовали свойство position fixed, чтобы заголовок оставался вверху. таким образом, вы также можете использовать position: fixed для этого. этот код работает абсолютно нормально #rightcol{ позиция: исправлена; ширина: 30%; справа: 50 пикселей; z-индекс: 9; фон: #fff; }. добавьте эти свойства для идентификатора rightcol

Ответ №2:

Вы можете использовать position sticky . липкий элемент работает как фиксированный элемент по отношению к своему родительскому элементу. Он будет использоваться как исправленный в пространстве, предоставленном его родителем.

Итак, по порядку для вашего проекта. Вам нужно реструктурировать ваш html таким образом, чтобы sticky element занимал достаточно места, чтобы вести себя как фиксированный элемент в этой области.

1. Привет, спасибо за ответ! Я не могу реструктурировать свой html, потому что это готовая тема для платформы электронной коммерции. Я попытался сделать два контейнера родными, но это привело к потере значительной функциональности платформы электронной коммерции. Вот как это происходит прямо сейчас: zckp5iw9gc2imykz-7669317690.shopifypreview.com/products/… Есть ли способ остановить его прямо перед нижним колонтитулом?

2. Только тогда мы сможем сделать это с помощью js. Вы можете применить on scroll событие с помощью JS