Как сделать раздельный скроллинг вертикальных блоков, как на news.mail.ru?

@vovkalenka · Регистрация: 12.02.2013

Студворк — интернет-сервис помощи студентам

Образец: http://news.mail.ru/inregions/... frommail=1
Если страницу скроллить вниз, колёсиком или ползунком справа, то можно увидеть замечательное решение - один столбец, достигнув своего низа, "замирает", движется только второй - пока его низ не приедет, потом оба уезжают вместе.
Актуальная штука для сайтов с вертикальными блоками с динамическим контентом, позволяет избавиться от "белых дыр."

Не доходит, как это сделано

Все попытки повторить ни к чему не приводят.

Добавлено через 42 минуты
Может быть решение не чистом CSS, а в JS?
Подскажите пожалуйста, кто понимает принцип создания такого эффекта.

@сэр Афим · 13.02.2013, 01:06

на JS проверяешь позицию элемента, далее применяешь css position:fixed;
Само решение довольно трудоёмкое, сходу могу лишь привести пример с JQuery, а не на чистом JS если нужно

Добавлено через 29 секунд
p.s. http://htmlbook.ru/css/position

@newJS · 13.02.2013, 08:30

здесь не два блока, а один, как просили

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

@vovkalenka · 13.02.2013, 10:01 **[ТС]**

Сообщение от сэр Афим

на JS проверяешь позицию элемента, далее применяешь css position:fixed;
Само решение довольно трудоёмкое, сходу могу лишь привести пример с JQuery, а не на чистом JS если нужно

Дайте пожалуйста с JQuery, если не затруднит, для сравнения.

Добавлено через 2 минуты

Сообщение от newJS

здесь не два блока, а один, как просили

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

Спасибо, примерно направление мысли поняли. Если честно, JS плохо получается переваривать, это наверное проблема всех, кто привык к С-подобным языкам, в частности мы больше по части PHP. Но будем пробовать разобраться обязательно.

@Taatshi · 13.02.2013, 11:56

сэр Афим, если тема в разделе HTML, решаем ее средствами HTML/CSS. Если по вашему мнению сделать это на HTML невозможно - просто скажите это. Для JS есть отдельная ветка.

Перенесено.

@сэр Афим · 13.02.2013, 13:53

Сообщение от Taatshi

сэр Афим, если тема в разделе HTML, решаем ее средствами HTML/CSS. Если по вашему мнению сделать это на HTML невозможно - просто скажите это. Для JS есть отдельная ветка.

хорошо, прошу прощения. Подтверждаю, без JS - затрудняюсь дать решение, боюсь что без извращений - такое не возможно

@newJS · 14.02.2013, 09:15

Сообщение от сэр Афим

боюсь что без извращений - такое не возможно

пол дня развлекался, результат ноль, уже есть идеи на завтра, попробую завтра продолжить

Сообщение от vovkalenka

Актуальная штука для сайтов с вертикальными блоками с динамическим контентом, позволяет избавиться от "белых дыр."

это меня и привлекло

Добавлено через 12 часов 58 минут
Это конечно больше демо, чем реальная страница, кто что про это скажет

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#lef {display:inline-block; width:40%; border:1px solid red; background:lavender;}
#rig {display:inline-block; width:40%; border:1px solid red; background:lavender;}
#rig {vertical-align:top;}
#con {text-align:center;}
#rig>div {background:pink; overflow:hidden; height:0;}
 
#gol>div, #niz>div {border:1px solid red; background:lavender;}
#gol {padding:0 0 9px 0; background:lavenderblush;}
#niz {padding:9px 0 0 0; background:lavenderblush;}
 
#win {width:1px; height:1px; position:fixed; right:0; bottom:0; visibility:hidden;}
 
 
#mnb {position:fixed; top:222px; background:window; border:1px solid blue; width:95%; padding:7px; font-size:21px;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function nextLoad(){
//если нужен пользовательский онлоад, иначе можно удалить функцию и её вызов
 };
 
 
 
(function(){
var Q={}, d;
d=document;
 
 
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому пришлось его тормозить
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };
 
function initFix(){
Q.lefE=d.getElementById("lef");
Q.lefB=Q.lefE.offsetTop+Q.lefE.offsetHeight;//низ левой колонки
Q.rigE=d.getElementById("rig");
Q.rigB=Q.rigE.offsetTop+Q.rigE.offsetHeight;//низ правой колонки
Q.rigS=Q.rigE.getElementsByTagName("div")[0].style;//див-распорка
Q.winS=d.getElementById("win");//правый нижний угол окна, нам низ нужен
 
 };
 
onscroll=function(){
var n, s;
s=d.documentElement.scrollTop||d.body.scrollTop;
if(Q.winS){
n=Q.winS.offsetTop+s;//текущая высота окна + текущий скрол
d.getElementById("mnb").innerHTML=s+'<br>'+Q.lefB+' '+Q.rigB+' '+n;
 
if(n>Q.rigB){//можно двигать
if(n<Q.lefB){Q.rigS.height=n-Q.rigB+'px';}//держим правую в самом низу
else{Q.rigS.height=Q.lefB-Q.rigB+'px';}}//движение прекратилось, прижимаем правую к низу
else{Q.rigS.height=0;}};//нельзя двигать, пока есть куда скролить
 
 
 };
 
 
 
 })();

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Скрол двух колонок</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="scrol1.css">
<script type="text/javascript" src="scrol1.js"></script>
</head>
 
<body>
 
<div id="gol"><div>text<br><br><br><br>texttext<br><br><br><br>text</div></div>
<div id="con"><div id="lef">
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
</div>
<div id="rig">
<div></div>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<!-- text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text -->
</div></div>
 
<div id="niz"><div>text<br><br><br><br>texttext<br><br><br><br>text</div></div>
 
<div id="mnb">0<br>0</div><!-- показуха -->
<img src="#" alt="" id="win">
 
</body>
</html>

@vovkalenka · 14.02.2013, 09:38 **[ТС]**

Сообщение от newJS

Это конечно больше демо, чем реальная страница, кто что про это скажет

Зря скромничаете

На первый взгляд - полноценное решение, очень и очень похоже, смотрится определенно красиво.
Спасибо!

Добавлено через 4 минуты
А если у нас будет вероятность, что правый столбец может оказаться длиннее левого, то надо копать эту часть?

Code
1
2
3
4
if(n>Q.rigB){//можно двигать
if(n<Q.lefB){Q.rigS.height=n-Q.rigB+'px';}//держим правую в самом низу
else{Q.rigS.height=Q.lefB-Q.rigB+'px';}}//движение прекратилось, прижимаем правую к низу
else{Q.rigS.height=0;}};//нельзя двигать, пока есть куда скролить

@newJS · 14.02.2013, 20:28

Сообщение от vovkalenka

Зря скромничаете

Да тут немного не в этом дело, дело в том, как все это будет встраиваться в реальную страницу.

Сообщение от vovkalenka

А если у нас будет вероятность, что правый столбец может оказаться длиннее левого, то надо копать эту часть?

Не надо копать, уже все вскопано, по идее должно на лету отслеживать какая из них меньше, но опять же, надо проверять в реальности

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Скрол двух колонок</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="scrol2.css">
<script type="text/javascript" src="scrol2.js"></script>
</head>
 
<body>
 
<div id="gol"><div>text<br><br><br><br>texttext<br><br><br><br>text</div></div>
<div id="con">
<div id="lef">
<div></div>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<!-- text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text -->
</div>
<div id="rig">
<div></div>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<!-- text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text -->
</div></div>
 
<div id="niz"><div>text<br><br><br><br>texttext<br><br><br><br>text</div></div>
 
<div id="mnb">0<br>0</div><!-- показуха -->
<img src="#" alt="" id="win">
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#lef {display:inline-block; width:40%; border:1px solid red; background:lavender;}
#rig {display:inline-block; width:40%; border:1px solid red; background:lavender;}
#rig {vertical-align:top;}
#con {text-align:center;}
#rig>div {background:pink; overflow:hidden; height:0;}
 
#gol>div, #niz>div {border:1px solid red; background:lavender;}
#gol {padding:0 0 9px 0; background:lavenderblush;}
#niz {padding:9px 0 0 0; background:lavenderblush;}
 
#win {width:1px; height:1px; position:fixed; right:0; bottom:0; visibility:hidden;}
 
 
#mnb {position:fixed; top:222px; background:window; border:1px solid blue; width:95%; padding:7px; font-size:21px;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//
function nextLoad(){
//если нужен пользовательский онлоад, иначе можно удалить функцию и её вызов
 };//
 
 
 
(function(){
var Q={}, d;
d=document;
 
//
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому пришлось его тормозить
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };//
//
function initFix(){
Q.lefE=d.getElementById("lef");
Q.lefB=Q.lefE.offsetTop+Q.lefE.offsetHeight;//низ левой колонки
Q.lefS=Q.lefE.getElementsByTagName("div")[0].style;//див-распорка
Q.rigE=d.getElementById("rig");
Q.rigB=Q.rigE.offsetTop+Q.rigE.offsetHeight;//низ правой колонки
Q.rigS=Q.rigE.getElementsByTagName("div")[0].style;//див-распорка
Q.winS=d.getElementById("win");//правый нижний угол окна, нам низ нужен
 
 };//
//
onscroll=function(){
var n, s;
if(Q.winS){
whoIsLess();
s=d.documentElement.scrollTop||d.body.scrollTop;
n=Q.winS.offsetTop+s;//текущая высота окна + текущий скрол
d.getElementById("mnb").innerHTML=s+'<br>'+Q.lefB+' '+Q.rigB+' '+n;
 
if(n>Q.minB){//можно двигать
if(n<Q.maxB){Q.link.height=n-Q.minB+'px';}//держим правую в самом низу
else{Q.link.height=Q.maxB-Q.minB+'px';}}//движение прекратилось, прижимаем правую к низу
else{Q.link.height=0;}};//нельзя двигать, пока есть куда скролить
 
 
 };//
//
function whoIsLess(){
Q.minB=Math.min(Q.lefB, Q.rigB);
Q.maxB=Math.max(Q.lefB, Q.rigB);
Q.link=Q.minB==Q.lefB?Q.lefS:Q.rigS;
 };//
 
 
 })();//

Добавлено через 17 секунд

Сообщение от vovkalenka

Зря скромничаете

Да тут немного не в этом дело, дело в том, как все это будет встраиваться в реальную страницу.

Сообщение от vovkalenka

А если у нас будет вероятность, что правый столбец может оказаться длиннее левого, то надо копать эту часть?

Не надо копать, уже все вскопано, по идее должно на лету отслеживать какая из них меньше, но опять же, надо проверять в реальности

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Скрол двух колонок</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="scrol2.css">
<script type="text/javascript" src="scrol2.js"></script>
</head>
 
<body>
 
<div id="gol"><div>text<br><br><br><br>texttext<br><br><br><br>text</div></div>
<div id="con">
<div id="lef">
<div></div>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<!-- text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text -->
</div>
<div id="rig">
<div></div>
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<!-- text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text -->
</div></div>
 
<div id="niz"><div>text<br><br><br><br>texttext<br><br><br><br>text</div></div>
 
<div id="mnb">0<br>0</div><!-- показуха -->
<img src="#" alt="" id="win">
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#lef {display:inline-block; width:40%; border:1px solid red; background:lavender;}
#rig {display:inline-block; width:40%; border:1px solid red; background:lavender;}
#rig {vertical-align:top;}
#con {text-align:center;}
#rig>div {background:pink; overflow:hidden; height:0;}
 
#gol>div, #niz>div {border:1px solid red; background:lavender;}
#gol {padding:0 0 9px 0; background:lavenderblush;}
#niz {padding:9px 0 0 0; background:lavenderblush;}
 
#win {width:1px; height:1px; position:fixed; right:0; bottom:0; visibility:hidden;}
 
 
#mnb {position:fixed; top:222px; background:window; border:1px solid blue; width:95%; padding:7px; font-size:21px;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//
function nextLoad(){
//если нужен пользовательский онлоад, иначе можно удалить функцию и её вызов
 };//
 
 
 
(function(){
var Q={}, d;
d=document;
 
//
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому пришлось его тормозить
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };//
//
function initFix(){
Q.lefE=d.getElementById("lef");
Q.lefB=Q.lefE.offsetTop+Q.lefE.offsetHeight;//низ левой колонки
Q.lefS=Q.lefE.getElementsByTagName("div")[0].style;//див-распорка
Q.rigE=d.getElementById("rig");
Q.rigB=Q.rigE.offsetTop+Q.rigE.offsetHeight;//низ правой колонки
Q.rigS=Q.rigE.getElementsByTagName("div")[0].style;//див-распорка
Q.winS=d.getElementById("win");//правый нижний угол окна, нам низ нужен
 
 };//
//
onscroll=function(){
var n, s;
if(Q.winS){
whoIsLess();
s=d.documentElement.scrollTop||d.body.scrollTop;
n=Q.winS.offsetTop+s;//текущая высота окна + текущий скрол
d.getElementById("mnb").innerHTML=s+'<br>'+Q.lefB+' '+Q.rigB+' '+n;
 
if(n>Q.minB){//можно двигать
if(n<Q.maxB){Q.link.height=n-Q.minB+'px';}//держим правую в самом низу
else{Q.link.height=Q.maxB-Q.minB+'px';}}//движение прекратилось, прижимаем правую к низу
else{Q.link.height=0;}};//нельзя двигать, пока есть куда скролить
 
 
 };//
//
function whoIsLess(){
Q.minB=Math.min(Q.lefB, Q.rigB);
Q.maxB=Math.max(Q.lefB, Q.rigB);
Q.link=Q.minB==Q.lefB?Q.lefS:Q.rigS;
 };//
 
 
 })();//

@vovkalenka · 15.02.2013, 03:50 **[ТС]**

Пробуем встроить в большой сайт. С первого подхода не всё получилось: блок фиксируется, но не его низ, а пикселей за 200 до низу.
Но, наверняка, найдём причину. Проверим разметку страницы, видимо не туда засунули IMG, по которому считается высота. Результат покажем.

@newJS · 15.02.2013, 06:49

Сообщение от vovkalenka

Проверим разметку страницы, видимо не туда засунули IMG, по которому считается высота

Теоретически этой пустышке пофигу где быть, этот тег все равно из потока вырывается, да и невидим он.

Сообщение от vovkalenka

Пробуем встроить в большой сайт. С первого подхода не всё получилось: блок фиксируется, но не его низ, а пикселей за 200 до низу.

Вот про это и говорил.
Нельзя контейнерам колонок давать margin, padding, все что нужно вкладываем внутрь еще контейнер и уже с ним работаем. Не уверен что выдергивая колонки из потока будет правильно работать, с этого начинал и обломался. Была идея сунуть колонки в таблицу, но до этого не дошло.

Сообщение от vovkalenka

Результат покажем.

Хотелось бы.

Модеры, в посту №9 половина дублей, удалите их, я один раз на кнопку нажимал.

@vovkalenka · 15.02.2013, 07:13 **[ТС]**

Подогнали руками высоту, выглядело это так:

Code
1
n=Q.winS.offsetTop+s-420;//текущая высота окна + текущий скрол

У нас на странице много болтается фиксированных блоков, и у многих элементов паддинги и маргины притянуты за уши. Это всё добавляет к значению высоты 420 пикселей.
После ручной доработки всё замечательно заработало, приклеивается, где надо.

Упустили из виду другое - сам короткий столбец получается вполовину ниже страницы сайта, если пользоваться большим монитором, и когда он низом прилипает к кромке браузера, то белая дырка появляется уже над ним.
Можно конечно дописать условие, что если столбец меньше окна, то ничего не приклеивать, но у нас он получится всегда меньше

Обязательно будем использовать на других сайтах

Спасибо ещё раз за отличный скрипт!

@newJS · 15.02.2013, 10:13

Сообщение от vovkalenka

то белая дырка появляется уже над ним.

До этого не додумался, речь то шла о высоких колонках.
Можно попробовать в див-распорку сунуть "правильный" фон и высоту ему дать нужную, но вам там виднее как оно лучше.

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@vovkalenka 1 / 1 / 1 Регистрация: 12.02.2013 Сообщений: 17

	Как сделать раздельный скроллинг вертикальных блоков, как на news.mail.ru? 12.02.2013, 21:42. Показов 4273. Ответов 12 Метки нет (Все метки) Образец: http://news.mail.ru/inregions/... frommail=1 Если страницу скроллить вниз, колёсиком или ползунком справа, то можно увидеть замечательное решение - один столбец, достигнув своего низа, "замирает", движется только второй - пока его низ не приедет, потом оба уезжают вместе. Актуальная штука для сайтов с вертикальными блоками с динамическим контентом, позволяет избавиться от "белых дыр." Не доходит, как это сделано Все попытки повторить ни к чему не приводят. Добавлено через 42 минуты Может быть решение не чистом CSS, а в JS? Подскажите пожалуйста, кто понимает принцип создания такого эффекта. 0

@сэр Афим 34 / 34 / 2 Регистрация: 26.10.2010 Сообщений: 111
	13.02.2013, 01:06
	на JS проверяешь позицию элемента, далее применяешь css position:fixed; Само решение довольно трудоёмкое, сходу могу лишь привести пример с JQuery, а не на чистом JS если нужно Добавлено через 29 секунд p.s. http://htmlbook.ru/css/position 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	13.02.2013, 08:30
	здесь не два блока, а один, как просили пример по ссылке не удачен, у меня на каждом прогоне был разный результат, но идея вроде понятна 1

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	13.02.2013, 11:56
	сэр Афим, если тема в разделе HTML, решаем ее средствами HTML/CSS. Если по вашему мнению сделать это на HTML невозможно - просто скажите это. Для JS есть отдельная ветка. Перенесено. 0

@vovkalenka 1 / 1 / 1 Регистрация: 12.02.2013 Сообщений: 17
	15.02.2013, 03:50 [ТС]
	Пробуем встроить в большой сайт. С первого подхода не всё получилось: блок фиксируется, но не его низ, а пикселей за 200 до низу. Но, наверняка, найдём причину. Проверим разметку страницы, видимо не туда засунули IMG, по которому считается высота. Результат покажем. 0