Здравствуйте!
Пользуясь вконтактом, многие заметили удобную штуку: при прокрутке ленты (какого-либо сообщества) когда из поля зрения пропадает правый столбец (в котором аватарка сообщества, подписчики, контактная информация и пр.), основной контент становится на всю ширину. Очень удобно в любом случае.
Предположим, мы имеем двухколоночный сайт шириной в 1000px. В левой колонке, назовём её #content, у нас содержание статьи (её ширина 700px). В правой колонке, назовём её #sidebar, у нас ссылки на статьи по теме, реклама и пр (её ширина 300px). Но: так как статья большая, у нас получилось, например, что высота левого столбца 3000px, а правого всего 500px. Т.е. при прокрутке страницы, когда сайдбар остался где-то наверху, у нас много свободного пространства справа, которое можно было бы занять текстом.
Отсюда следует вопрос: как сделать так, чтобы при прокрутке страницы на 500px вниз (предположим - высота всегда 500 и не надо варировать ничего "в зависимости от высоты"), у нас скрывался #sidebar и ширина #content менялась с 700px на 1000px/100%, но, возвращаясь назад (когда отступ от верха сайта составляет 500px), #sidebar снова возвращался и ширина #content вновь становилась 700px?
Вот готовое решение:Дано:
Код
<div id="content">
</div>
<div id="sidebar">
</div>
Это в CSS:
Код
#content {
height: 2000px;
width: 700px;
float:left;
background-color: #cf0;
}
#sidebar {
height:500px;
width: 300px;
float: left;
background-color: #fc0;
}
Это в JS:
Код
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#content').css({
'width': '1000px'
});
}
if ($(this).scrollTop() < 500) {
$('#content').css({
'width': '700px'
});
}
});
Ссылка на КОД.
В этой теме Вы можете задать вопрос о материале Как скрывать блок при прокрутке страницы?.
Суббота 28.12.2024, 06:48:34 
