Как сжать боковую колонку после прокрутки вниз и невидимости последнего её элемента?

Question

[Tlito]

как например тут www.bonprix.ru/kategoriya/dlia-dietiei-malchiki-80-134 сделано что боковая колонка просто внесена в блок product-list и по завершении этой колонки другие элементы - товары показываются на всю ширь экрана. но на бонприкс не адаптивная вёрстка.
подскажите решение для моего сайта: tlito.ru
нужно чтобы голубая полоска сжималась до 40 пикселей в ширину когда человек опустился и она не видна но тока при экране выше 640 пикселей, когда эта колонка еще есть.

Answer 1

[Виталий Инчин ☢]

Все довольно просто!
Вам нужно, чтобы при любом скроле меню скрывалось или только тогда, когда содержимое меню уже не видно? Вот пример для второго варианта:
Берете и получаете координаты последнего элемента вашего сине-зеленого блока относительно текущей прокрутки....и.......

document.addEventListener("scroll", function(){
var elem = последний элемент в синем блоке....
if(elem.getBoundingClientRect().bottom<= 0){
//делаем что-то с синим блоком
}
});

Comments

[Tlito]

я не умею js поэтому этот код я просто никак не смогу применить и дописать

[Виталий Инчин ☢]

Tlito: а без is вы не реализует решение своей задачи!

[Виталий Инчин ☢]

Js*

[Tlito]

кроме js есть еще тостер и профессиональные разработчики которые тут бывают

[Виталий Инчин ☢]

Tlito: просто погуглите про поиск элементов в DOM и свойство style и замените те 2 строчки в моём коде на нужное вам.