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

Меню

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

0

Выдвигающаяся при прокрутке страницы панель

Jemand 27295 ,
JavaScript

Данная панель выдвигается только после того как будет достигнут определённый элемент при прокрутке страницы. В данном случае это <div id=”show”></div>. Итак код:
1. CSS

#slidebox{
	width: 728px;
	height: 90px;
	margin-left: 50%;
	left: -369px;
	background-color: #fff;
	border-top: 1px solid #E28409;
	border-right: 1px solid #E28409;
	border-left: 1px solid #E28409;
	position: fixed;
	bottom: -105px;
	box-shadow: 0 0 10px #aaa;
	-moz-box-shadow: 0 0 10px #aaa;
	-webkit-box-shadow: 0 0 10px #aaa;
	}
a.close{
	background: transparent url(close.gif) no-repeat top left;
	width: 13px;
	height: 13px;
	position: absolute;
	cursor: pointer;
	top: 10px;
	right: 10px;
	z-index: 10;
	}
a.close:hover{
	background-position: 0px -13px;
	}

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		$(window).scroll(function(){
			var distanceTop = $('#show').offset().top - $(window).height();
			if  ($(window).scrollTop() > distanceTop)
				$('#slidebox').animate({'bottom':'0px'},300);
			else
				$('#slidebox').stop(true).animate({'bottom':'-105px'},200);
		});
		$('#slidebox .close').bind('click',function(){
			$(this).parent().remove();
		});
	});
</script>

4. HTML

<div id="slidebox">
	<a class="close"></a>
</div>

5. Вызывающий элемент

<div id="show"></div>

6. Изображение
Закрыть

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

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