Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.06.2012, 10:41
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от region029
нужен такой скрипт, пример 9gag.com
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style>

.container {
	width: 900px;
	background: green;
	position:relative;
	padding: 5px;
	float:left;
}

.left {
	float:left;
	width: 600px;
background: blue;
}

.right {
	display:inline;
	width: 300px;
	float:left;
	border-radius:15px;
	position:static;
	background: transparent;

transition-property:top;
 -webkit-transition-property:top;
 -moz-transition-property:top;
 -o-transition-property:top;
 -ms-transition-property:top;

transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -ms-transition-duration: 0.6s; /* IE9+ */

}
.top-visible .right {
	top:20px;
	position:fixed!important;

}
.top-visible-fix {
	display:inline;
	vertical-align:bottom;

}
.top-visible-fix .right {
	margin-top:auto;
	position:absolute;
	bottom:20px;
transition-property:none;
 -webkit-transition-property:none;
 -moz-transition-property:none;
 -o-transition-property:none;
 -ms-transition-property:none;
}

.clearer {
	clear: both;
}

.wrap {margin-left: auto; margin-right: auto; width: 900px;}

.tit {width: 290; margin-left: 5px;padding-left:23px margin-right: 5px; margin-top: 5px; background: #0DFF0D; height: 100px; position: relative; bottom: 2px; color: #FFF; font-size: 25px;text-shadow:#000 1px 1px 1px;
    border-radius:15px;
border:solid red 4px;
}

</style>
</head>

<body>

<div class="wrap">


<div class="container"  id="box_3">

<div class="left"> Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
</div>

<span class="right">

<div class="tit"  id="title_3">Заголовок 3</div>

</span>

</div>


<div class="container"  id="box_2">

<div class="left">Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент т 
</div>

<span class="right">

<div class="tit"  id="title_2">Заголовок 2</div>

</span>

</div>


<div class="container"  id="box_1">

<div class="left">Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент
Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент 
</div>

<span class="right">

<div class="tit" id="title_1">Заголовок 1</div>

</span>

</div><!--//--></div>

<script type="text/javascript">
function Scroll_Tst(){
  var WinTop = $(window).scrollTop();
  var WinBottom = WinTop+$(window).height();

    $(".container").each(function (j) {
	var a=$(this);
	var Top = a.position().top;
	var Bottom = Top+a.height();

	var b = a.find("span.right");
	var b_Heig = b.outerHeight() + 20; //20 - отступ от низа

	if(Top > WinTop||Bottom < WinTop||Top > WinBottom) {	// container либо вне поля видимости, либо не
	$(this).attr('class','container'); return true;}	//влотную к верху экрана;

	if(Bottom > WinTop && Top < WinTop ){	//container влотную к верху экрана;
	if(Bottom - b_Heig > WinTop){$(this).attr('class','container top-visible');
	} else {$(this).attr('class','container top-visible-fix')}
	return true;}

    });
}

 var TimScroll;
 var Ready = true;

$(window).scroll(function(){
   if(Ready){Ready = false; clearTimeout(TimScroll);

     Scroll_Tst()

     TimScroll=setTimeout("Ready = true",10);
   } 
});
</script>

</body>
</html>

Последний раз редактировалось Deff, 16.06.2012 в 12:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение блока при скроллинге region029 jQuery 11 06.10.2013 23:44
Вывод определенного блока при выполнении условий sergiocharm Общие вопросы Javascript 24 17.04.2012 19:22
Событие при наведение мыши, которое раскроет содержимое блока (элемента)... aklak Элементы интерфейса 3 27.03.2012 11:30
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21