CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 268   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Закрывающийся липкий футер на CSS+jQuery

Jemand 19723
CSS, JavaScript

1. CSS

#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;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>

3. JavaScript

<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>

4. HTML

<div id="sticky-footer">
	<a href="http://web-forum.ws" target="_blank">Форум помощи начинающим сайтостроителям</a>
	<span id="close"></span>
</div>

Рекламная пауза

Оставить комментарий