Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перемещение блока при скроллинге (https://javascript.ru/forum/misc/28920-peremeshhenie-bloka-pri-skrollinge.html)

region029 07.06.2012 11:58
Перемещение блока при скроллинге
 
Ситуация следующая, нужно, чтобы при скролинге, когда верх окна браузера касается верха определённого блока, тот начинал перемещаться и заканчивал перемещаться, когда достигнет низа родительского контейнера. Такая фича нужна из-за того, что высота контента будут достигать 2-3 высот экрана. Привёл пример html кода (3 блока), нужно, чтобы чёрный блок перемещался вдоль красного, я так понимаю, что при условии, когда низ окна браузера достигает данный div, то изменяется его св-во position на fixed. Ещё важным моментом является, то, что таких блоков на странице будет 10 шт., и их id будут обновляться с обновлением контента.
Также в коде присутствует js, он выравнивает высоты левого и правого "дива".

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
</script>

<style>

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

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

.right {
	width: 300px;
	float:left;
background: red;
}

.clearer {
	clear: both;
}

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

.tit {width: 290; margin-left: 5px; margin-right: 5px; margin-top: 5px; background: black; height: 100px; position: relative; bottom: 2px; color: #ffffff; font-size: 25px;}

</style>
</head>

<body>

<div class="wrap">


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

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

<div class="right">

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

</div>

</div>

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

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

<div class="right">

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

</div>

</div>

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

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

<div class="right">

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

</div>

</div>

</div>
</body>
</html>

Deff 07.06.2012 13:32
Цитата:
Сообщение от region029
нужно, чтобы при скролинге, когда верх окна браузера касается верха определённого блока, тот начинал перемещаться и заканчивал перемещаться, когда достигнет низа родительского контейнера.
Нарисуйте пару последовательных эскизов со стрелками - чот как то не понял: что и куда... а так вроде задача решаемая

region029 07.06.2012 13:56
ок, нарисую

region029 07.06.2012 17:15





Deff 10.06.2012 12:30
:) Сss(oм) - не подойдёт ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
</script>

<style>

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

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

.right {
	display:inline-block;
	width: 300px;
	float:left;
background: red;
}

.clearer {
	clear: both;
}

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

.tit {width: 290; margin-left: 5px; margin-right: 5px; margin-top: 5px; background: black; height: 100px; position: relative; bottom: 2px; color: #ffffff; font-size: 25px;	}

.wrap:hover .container .right{
	display:none;

}

.wrap:hover .container:hover .right{
	display:block;
	position:fixed!important;
        top:13px;margin-left:600px;

}
</style>
</head>

<body>

<div class="wrap">


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

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

<div class="right">

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

</div>

</div>

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

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

<div class="right">

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

</div>

</div>

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

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

<div class="right">

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

</div>

</div>

</div>
</body>
</html>

region029 10.06.2012 12:41
Интересное решение, но хотелось бы, чтобы заголовки были в разных блоках, то есть если например мы докрутили до низа новости, то видим и заголовок данной новости и заголовок ниже расположенного поста

Deff 10.06.2012 12:49
region029,
Ну bes чот делает в данной теме => http://javascript.ru/forum/misc/2898...kie-bloki.html

Deff 10.06.2012 12:50
Цитата:
Сообщение от region029
и заголовок ниже расположенного поста
Эт тож не сложно, сейчас отображается заголовок именно того блока, где расположен курсор(собственно на нём концентрация

Deff 10.06.2012 14:58 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
</script>

<style>

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

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

.right {
	display:inline-block;
	width: 300px;
	float:left;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;

    box-shadow: 0px 5px 18px #000;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
   opacity: 0.8; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=80); /* для ИЕ ниже девятой */
background: red;
}

.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;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
	}

.wrap:hover .container .right{
  display:none;
   opacity: 0.0; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=0); /* для ИЕ ниже девятой */
}

.wrap:hover .container:hover .right{
	display:block;
	position:fixed!important;
        top:13px;margin-left:600px;
   opacity: 0.8; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=80); /* для ИЕ ниже девятой */
}
</style>
</head>

<body>

<div class="wrap">


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

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

<div class="right">

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

</div>

</div>

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

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

<div class="right">

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

</div>

</div>

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

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

<div class="right">

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

</div>

</div>

</div>
</body>
</html>

region029 10.06.2012 20:47
Цитата:
Сообщение от Deff (Сообщение 180529)
region029,
Ну bes чот делает в данной теме => http://javascript.ru/forum/misc/2898...kie-bloki.html
по моей просьбе :) очнь нужен такой скрипт, пример 9gag.com

Deff 16.06.2012 10:41
Цитата:
Сообщение от 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>


Часовой пояс GMT +3, время: 18:48.