Закрывающийся липкий футер CSS+jQuery
Пример:
http://s1.uploads.ru/t/VgE63.png
http://s1.uploads.ru/t/CjVep.png

Первый код вставляется в HTML-верх. Ниже приведен код и его разбор.

код #1
Код:
<style>
#sticky-footer {
	border-bottom: 1px solid #ECF1EF;
	background: #151715;
	font-size: 16px;
	color: #FFF;
	padding: 10px 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	text-align: center;
	}
#sticky-footer a {
	font: normal 18px Trebuchet MS;
	text-decoration: none;
	}
#close {
	width: 20px;
	height: 20px;
	background: url('close.png') top no-repeat;
	border: none;
	margin: 3px 0 0 15px;
	position: absolute;
	cursor: pointer;
	}
</style>

Первый код, который мы видим отвечает за границы футера.

border-bottom: 1px solid #ECF1EF;

Жирным выделен размер границы. Можно менять на любое значение.
Наклоном обозначен стиль границы. В нашем случае это ghjcnj kbybz.

dashed – пунктирная линия границы;
dotted – пунктирная точечная граница;
double – двойная граница;
groove – теснённая граница;
inset – граница с тенями, которые создают эффект вогнутости;
outset – аналогично с предыдущей, но в другую сторону;
ridge – практично похож на outset;
solid – сплошная граница, без эффектов;
none – нет границы.

Подчеркнутый - цвет.
Далее идет фон футера, цвет и размер, положение текста и самого футера, так же его размеры.

#sticky-footer a {
font: normal 18px Trebuchet MS;
text-decoration: none;
}

font: normal 18px Trebuchet MS;

Жирным выделен стиль текста.
Курсивом отмечен размер текста.
Подчеркнутым выделен шрифт текста.
Далее приведен код для скрытия футера.

#close {
width: 20px;
height: 20px;
background: url('close.png') top no-repeat;
border: none;
margin: 3px 0 0 15px;
position: absolute;
cursor: pointer;
}

Первые две строки отвечают за размер и высоту футера. В тэге "background" ничего менять не следует. В 3 и 4 строках отмечаются границы закрывающегося футера.
Далее в начало HTML-верха ставим jQuery-код.

код #2
Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>

Ниже код JS. Вставляем сразу за jQ кодом.

код #3
Код:
<script type="text/javascript">
$(document).ready(function() {
	(function() {
	//settings
	var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
	var sibar = function() { $('#sticky-footer').fadeTo(fadeSpeed,1); }, stbar = function() { $('#sticky-footer').fadeTo(fadeSpeed,fadeTo); };
	var inside = false;
	//do
	$(window).scroll(function() {
    position = $(window).scrollTop();
    if(position > topDistance && !inside) {
    	//add mouseover events
    	stbar();
    	$('#sticky-footer').bind('mouseenter',sibar);
    	$('#sticky-footer').bind('mouseleave',stbar);
    	inside = true;
    }
	});
	//close
	$('#close').live('click', function(event) {
    $('#sticky-footer').toggle('show');
	});
	})();
});
</script>

В коде нежелательна замена.
И вот, последнее, что необходимо - сам футер, а точнее его HTML-код. Его можно вставлять в Объявление.

код #4
Код:
<div id="sticky-footer">
	<a href="ссылка" target="_blank">название</a>
	<span id="close"></span>
</div>

В данном случае в футере будет отображаться ссылка. Можно заменить ссылку на текст. Для этого нужно строку с ссылкой просто удалить и заменить ее на Ваш текст. Футер поддерживает любое форматирование.

код #3.1

<div id="sticky-footer">
текст
<span id="close"></span>
</div>

Отредактировано Джи (29-06-2012 13:49:32)