Как реализовать изменение ширины блока в зависимости от скролла страницы?

Question

[Valery23]

Подскажите как реализовать смену width у div при скролле страницы. Вижу как реализовано на чужом сайте: есть div с таким css

position: absolute;
    display: block;
    top: 100%;
    background: #FF5714;
    width: 1%;
    height: 2px;
    transition: width 1s linear;

и при скролле страницы изменяется у diva ширина через style, например:
div style="width: 48%;"

P.S. такие движущие дивы должны двигаться только на несколько движения колесика мышки. Их на странице много, то есть заполнение всей ширины элемента должно быть при скролле примерно половины экрана. И еще, когда возвращаешься (скроллом) вверх, то у элемента убирается ширина.

Comments

[Алексей Юдов]

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

[Шохрух Шаймардонов]

А в чем проблема поставить обработчик события mousewheel в котором и будете увеличивать / уменьшать размер блока?

Answer 1

[Андрей Б.]

Задача не совсем понятна, но примерно так.

Comments

[Valery23]

Спасибо за ответ. Похоже то что нужно. А можно как то привязать к классу, а то что то не работает у меня на сайте? Наверное не работает, так как привязана к нижестоящему. А нужно просто в зависимости от скролла.

[Андрей Б.]

Valery23, можно, поменяйте ("div") на нужный класс

[Valery23]

Андрей Б., да. Получилось. Но мне пришлось убрать position: fixed; так как мой элемент находится в середине страницы, не вверху. Проблема в том, что ширина начинает меняться с самого верха страницы, а не тогда, когда я доскролю до моего элемента. Можно это как то пофиксить?

[Valery23]

Андрей Б., еще столкнулся с проблемой, если делать 2 таких блока то второй не работает (