Сворачивание sidebar при прокрутке

 
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2569
Вроде бы, давным-давно, создавалась тема с пожеланием убирать sidebar при прокрутке, если в нем ничего не выводится.
Решение никто не опубликовал, вроде бы... Тему не нашел. Если баян, не пинать joke

Если кому пригодится, вынесу код на обсуждение...
Редактировалось: 2 раз (Последний: 19 декабря 2013 в 14:28)
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
Медаль
Сообщений: 380
Пригодилось бы,у меня даже код где то был, но он только для темы дефолтной, а пояснений как подгонять под другие позиции нету.То есть если позиции называются по другому то тогда код не срабатывает.
Я меняю валюту на сайте obmenka. Рекомендую! Возможен вывод в наличные деньги.
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2814
Евгений, очень прикольная штучка, если есть возможность поделиться - делитесь.
Спасибо!
Украинский для инстант
Посетитель
small user social cms
Медаль
Сообщений: 380
Вод код, вставить после тега <body>
Код PHP:
  1.  
  2. <script type="text/javascript">
  3. $(function() {
  4. var ptop = $("#sidebar").offset().top;
  5. var ptop2 = $("#sidebar").height();
  6. var itogo = ptop + ptop2;
  7. $(window).scroll(function(){
  8. var scrollTop = $(window).scrollTop();
  9. if(scrollTop >= itogo){
  10. $("#sidebar").css("display","none");
  11. $("#main").removeClass("grid_8").addClass("grid_12");
  12. }
  13. else
  14. {
  15. $("#main").removeClass("grid_12").addClass("grid_8");
  16. $("#sidebar").css("display","block");
  17. }
  18. });
  19. });
  20. </script>
  21.  
Я меняю валюту на сайте obmenka. Рекомендую! Возможен вывод в наличные деньги.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2569
st.Puh:
Вод код, вставить после тега <body>
да, совершенно верно :)
просто код быдловатый smile может кто приберет...
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2569
var ptop = $("#sidebar").offset().top; - узнаем сколько от слоя с id sidebar до верха экрана.
var ptop2 = $("#sidebar").height(); - узнаем высоту слоя id sidebar
var itogo = ptop + ptop2; - складываем, теперь мы знаем где заканчивается sidebar
if(scrollTop >= itogo){ - если прокрутили больше, то
$("#sidebar").css("display","none"); - прячем сайдбар
$("#main").removeClass("grid_8").addClass("grid_12"); - убираем старый класс, добавляем новый, чтобы контент стал на всю ширину
else - если прокрутили меньше высоты сайдбара, его нужно вернуть
$("#main").removeClass("grid_12").addClass("grid_8"); - убираем новый класс, возвращаем старый
$("#sidebar").css("display","block"); - возвращаем видимость сайдбару

У кого свои шаблоны, правьте имена классов и id слоев...
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2814
Даааа, несколько прикольчиков можно соорудить.
Спасибо!
Украинский для инстант
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.