Липкий элемент не отвечает.Проблема, которая еще не была задокументирована - PullRequest
Новая
       15

Липкий элемент не отвечает.Проблема, которая еще не была задокументирована

0 голосов
/ 03 января 2019

Независимо от того, что я пытаюсь, я не могу получить изображение на моей тестовой веб-странице, которое может застрять при прокрутке.Это здесь: https://www.varamedia.be/website-laten-maken/restaurants/. Я хочу, чтобы изображение ноутбука с людьми на нем было липким при прокрутке другого контента.

Это сайт Wordpress, и я также заметил нечто странное, а именно CSS, который, по-видимому, не распознает липкий CSS.Сообщение об ошибке: «ожидаемое (статическое | относительное | абсолютное | фиксированное), но найденное« липким ».»Вот изображение этого: https://www.varamedia.be/wp-content/uploads/2019/01/sticky.png

Я действительно ценю любые отзывы об этом.Большое спасибо за то, что поделились своими мыслями.

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

Я пытался использовать идентификаторы, классы, поиграл с переполнением: скрытый;и т.д. Но почему-то я что-то здесь упускаю.Хотя мне кажется, что я упускаю из виду некоторые детали, потому что позиция: липкая;Функция CSS выглядит довольно просто, но, очевидно, это не так: / 

.stickyimage{ 
    position:sticky;
}

Я бы приветствовал любые советы, основанные на проверке данного URL.Спасибо тысячу раз за ваш ценный вклад.

Ответы [ 2 ]

0 голосов
/ 04 января 2019

У вас есть 2 проблемы.

Проблема # 1 - Вы должны delcare вверху, внизу, влево или вправо на элементе с позиции: sticky.

Проблема # 2 - Ваш родительский элементне может быть переполнения: скрыто.Прямо сейчас и тег body, и тег html имеют следующее ... 

overflow-x: hidden;
overflow-y: hidden;

Удалить эти ...

enter image description here

Вам также нужно убедиться, что stickyclass находится на правильном div, вы хотите, чтобы он был на внешнем div, в вашем примере это должно быть на следующем div.

enter image description here

Я проверил это, и оно работает как положено.

0 голосов
/ 03 января 2019

Должно быть добавлено «верхнее» или «нижнее» значение. 

body {
  margin:0;
}

p {
  font-size:36px;
  line-height:50px;
}

.nav {
  width:100%;
  background:orangered;
  height:60px;
  font-size:24px;
  color:#fff;
  text-align:center;
  line-height:60px;
  /*following codes is for sticky */
  position:sticky;
  top:0; /* it's up to you */
}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates voluptatum cum optio a natus iste repellendus eaque at aut, voluptatibus sit veritatis quis quam magnam aspernatur, vero, sunt modi magni.</p>
<div class="nav">This a sticky nav</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p>
...