Пользуясь вконтактом, заметил удобную штуку: при прокрутке ленты (какого-либо сообщества) когда из поля зрения пропадает правый столбец (в котором аватарка сообщества, подписчики, контактная информация и пр.), основной контент становится на всю ширину. Очень удобно и в моём случае.
Предположим, мы имеем двухколоночный сайт шириной в 1000px. В левой колонке, назовём её #content, у нас содержание статьи (её ширина 700px). В правой колонке, назовём её #sidebar, у нас ссылки на статьи по теме, реклама и пр (её ширина 300px). Но: так как статья большая, у нас получилось, например, что высота левого столбца 3000px, а правого всего 500px. Т.е. при прокрутке страницы, когда сайдбар остался где-то наверху, у нас много свободного пространства справа, которое можно было бы занять текстом.
Отсюда следует вопрос: как сделать так, чтобы при прокрутке страницы на 500px вниз (предположим - высота всегда 500 и не надо варировать ничего "в зависимости от высоты"), у нас скрывался #sidebar и ширина #content менялась с 700px на 1000px/100%, но, возвращаясь назад (когда отступ от верха сайта составляет 500px), #sidebar снова возвращался и ширина #content вновь становилась 700px?
Понимаю, что здесь необходимо использование js/jquery, но я с этими вещами не дружу.
Люди добрые!
А как все таки сделать тоже самое, но только если высота блока при этом варьируется (т.е то 500 может быть то 3000)???
if ($(this).scrollTop() > 500) - что здесь нужно исправить? Что бы блок становился шире в зависимости от конечной высоты соседнего блока?
Все два блока разной высоты в зависимости от заполнения контента ( id="content" и id="sidebar").
Простой
