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

#1 11 мая 2013 в 21:35

Вроде бы, давным-давно, создавалась тема с пожеланием убирать sidebar при прокрутке, если в нем ничего не выводится.
Решение никто не опубликовал, вроде бы… Тему не нашел. Если баян, не пинать joke

Если кому пригодится, вынесу код на обсуждение…

Разработка виджетов, полей и компонентов, сайты под ключ. site: www.zau4man.ru telegram: @zau4man консультации: 300р./час

#2 11 мая 2013 в 22:20

Пригодилось бы, у меня даже код где то был, но он только для темы дефолтной, а пояснений как подгонять под другие позиции нету.То есть если позиции называются по другому то тогда код не срабатывает.

Я меняю валюту на сайте obmenka. Рекомендую! Возможен вывод в наличные деньги.

#3 12 мая 2013 в 00:41

Евгений, очень прикольная штучка, если есть возможность поделиться — делитесь.
Спасибо!

Украинский для инстант

Сегодня в 17:30

#4 12 мая 2013 в 09:24

Вод код, вставить после тега <body>

 
<script type="text/javascript">
	$(function() {
		var ptop = $("#sidebar").offset().top;
		var ptop2 = $("#sidebar").height();
		var itogo = ptop + ptop2;
    $(window).scroll(function(){
		var scrollTop = $(window).scrollTop();
        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");
        	}
    });
	});
</script>

Я меняю валюту на сайте obmenka. Рекомендую! Возможен вывод в наличные деньги.

#5 12 мая 2013 в 10:01

Вод код, вставить после тега <body>
st.Puh

да, совершенно верно :)
просто код быдловатый😊может кто приберет…

Разработка виджетов, полей и компонентов, сайты под ключ. site: www.zau4man.ru telegram: @zau4man консультации: 300р./час

#6 12 мая 2013 в 10:07

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 слоев…

Разработка виджетов, полей и компонентов, сайты под ключ. site: www.zau4man.ru telegram: @zau4man консультации: 300р./час

#7 12 мая 2013 в 12:37

Даааа, несколько прикольчиков можно соорудить.
Спасибо!

Украинский для инстант

[ РЕШЕНО] за инвайт Родину гот

Ваша версия InstanCMS

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Как сделать фон на высоту экрана с прокруткой только на содержимое сайта

как сделать прокрутку при составлении статьи?

Как изменить стиль для Сворачиваемых блоков

Сворачивание комментариев

Как по умолчанию сворачивать заголовки фильтра ?

Полоса прокрутки или адаптивные таблицы

InstantCMS Team

О проекте

Поддержка

Дополнения