Перейти к публикации
iteam

Автоматическое скрытие левого блока при прокрутке сайта

Рекомендованные сообщения

iteam

Смотрите есть сайт http://fun24.org подскажите какк сделать что бы при прокрутке вниз по оканчанию блоков в левом столбце автоматически скрывался столбик и новость растягивалась на всю страницу как на

http://www.pirojok.net/

только у них скрывается правый блок

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
vir2oz

Вконтакте также сделано, мне тоже интересно  :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
iteam

Вконтакте такого не видел =) А вот сайт пирожок нет , наглядно все =) 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Mel

Дизайн понравился. А это делается через JavaScript, только не знаю как.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
vir2oz

Так ВКонтакте тоже наглядно. На странице профиля есть левые блоки и правые, когда стену пролистываешь и левые блоки заканчиваются, новости со стены растягиваются также как на вашем примерочном сайте :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Mel

По моему вот:

$(document).ready(function() {
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 111) {
$('#main-menu').addClass('move');
}
else {
$('#main-menu').removeClass('move');
}
});
});

Где: 111 то число, после скролла вниз которого у класса #main-menu добавится .move, а в мув можно прописать любое свойство, в твоем случае наверное ширину новостей допустим widht: 100%;, ну или как хочешь. и если обратно заскроллить, то .move уберется и новости станут обычной ширины.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Mel

@Arteom , Это ты через тот скрипт, что я выложил? Нажимаешь "Расширенная форма" а там есть форма загрузки.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Arteom

@Arteom , Это ты через тот скрипт, что я выложил? 

Условие тоже, но тут не нужно указывать высоту, только классы блоков.

scroll.rar

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

Есть тут одна немаловажная проблема: когда сайдбар скрывается, контент становится шире, поскольку текста на одной строке становится больше - текст уезжает вверх. Нужно продумать рассчёт верхнего отступа.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
iteam

Так сейчас попробую метод который указан выше



Дизайн понравился. А это делается через JavaScript, только не знаю как.

 

да на пирожке хороший диз , минус что долго грузится =( 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
vir2oz

@iteam, у меня всё отлично грузит...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
iteam

Так архив скачал =) что находится в js  файле juery ? Не могу его в блокнотах открыть. ода из libs 


@iteam, у меня всё отлично грузит...

 

Я про общую скорость загрузки, для оптимизации


По моему вот:



$(document).ready(function() {
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 111) {
$('#main-menu').addClass('move');
}
else {
$('#main-menu').removeClass('move');
}
});
});

Где: 111 то число, после скролла вниз которого у класса #main-menu добавится .move, а в мув можно прописать любое свойство, в твоем случае наверное ширину новостей допустим widht: 100%;, ну или как хочешь. и если обратно заскроллить, то .move уберется и новости станут обычной ширины.

В моем случае блок с левой стороны. Значит в libs правое менять на лево. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Mel

:facepalm:

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
iteam



$(document).ready(function() {
var position = $('.sidebar').position();
var height = position.top + $('.sidebar').height();
$(window).scroll(function() {
if ($(this).scrollTop() > height) {
$('.sidebar').hide();
$('.middle').css('margin-left', '0');
}
else {
$('.middle').css('margin-left', '270px');
$('.sidebar').show();
}
});
});

в моем случае так получается

 

:facepalm:

 

:coffee: Не надо таких смайлов. Просто ребенок маленький не спит, уже если честно крыша едет

 

не виходит =( плюс конфликт с менюшкой почему то 

 

ВСЕМ СПАСИБО все получилось. С ребенком нервы выматал, что не заметил что в скрипте стоит .div а у меня в шаблонах div id

 

Есть тут одна немаловажная проблема: когда сайдбар скрывается, контент становится шире, поскольку текста на одной строке становится больше - текст уезжает вверх. Нужно продумать рассчёт верхнего отступа.

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость
Эта тема закрыта для публикации сообщений.

×
×
  • Создать...