Как сделать раздельный скроллинг вертикальных блоков, как на 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

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

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

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

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

	Как сделать раздельный скроллинг вертикальных блоков, как на news.mail.ru? 12.02.2013, 21:42. Показов 4319. Ответов 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