Плавающий блок при скроллинге

Tekuto

Сообщения: 1147 Репутация: N Группа: Адекваты

16 августа 2011 г. 2:26

Есть 2 блока. Один выше другого. Необходимо сделать так, чтобы верхний блок спускался вниз при скроллинге, при этом наползая на второй (не смещая его). Как такое можно реализовать? В какую сторону копать?

http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/ - использовал это, но блок второй смещается вместе с плавающим.
artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

16 августа 2011 г. 2:36, спустя 10 минут 19 секунд

position: fixed
+
z-index

ιιlllιlllι унц-унц
Tekuto

Сообщения: 1147 Репутация: N Группа: Адекваты
16 августа 2011 г. 2:38, спустя 1 минуту 37 секунд
у меня так и все равно не катит.

#fixed { position: fixed; z-index: 100; }

artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

16 августа 2011 г. 2:53, спустя 15 минут 39 секунд

руки то надо выпрямить

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Плавающий блок с без помощи jQuery</title> rel="stylesheet" href="http://jemand.ru/examples/template-example/style.css" type="text/css" />
<style>
.left {
	width:70%;
	float:left;
}
.right {
	margin-top: 10px;
	float:right;
	width:20%;
}
#fixed {
	color: #fff;
	background: #000 url(http://jemand.ru/examples/template-example/template-example-headline-bg.gif);
	padding:20px;
	border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	font-family: Georgia;
	position: fixed; 
	z-index: 100;
 	}
</style>
</head>
<body>
<!– Заголовок всегда ссылка на саму статью! –>
<div id="wrap">
	<div id="headline">

		<a href="http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/">Плавающий блок с без помощи jQuery</a> 
	</div>
	<div id="content" class="clearfix">
		<div class="left">
			<!– Содержание –>
				<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			<!– /Содержание –>
		</div>
		<div class="right">

			<div id="fixed">> Текст фиксированного блока</div>
		</div>
	</div>
</div>
<div id="footer">
	Обсудить статью Вы всегда можете на форуме <a href="http://web-forum.ws" target="_blank">Web-Forum.ws</a>!
</div>

</body>
</html>

Спустя 164 сек.

это я скопировал с твоей ссылки, как ты можешь догадаться.
здесь от <div class="right"> можно было бы избавиться, но лениво.
много лишнего, я просто покоцал все <script> и добавил position — все!

ιιlllιlllι унц-унц

Tekuto

Сообщения: 1147 Репутация: N Группа: Адекваты

16 августа 2011 г. 3:10, спустя 16 минут 32 секунды

Обманул) Я position:fixed не поставил.
Но один хуй. После того, как добавил правило, первый блок ускакал вниз и теперь видна только его верхушка, а второй блок встал на место первого.

P.S. Я понимаю, что корявые руки. Но ничего, со временем станут прямыми)
Tekuto

Сообщения: 1147 Репутация: N Группа: Адекваты

16 августа 2011 г. 3:17, спустя 6 минут 39 секунд

Он меня уже заебал за 2 часа))) Поменял местами))))))))))))))
Спустя 44 сек.
artoodetoo, спасибо за участие

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

Плавающий блок при скроллинге

Войти