Начинающий-Js-кодер,
может как-нибудь так?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Правильный скролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
background: #aef;
}
.column-right {
margin-left: 30%;
width: 70%;
background: tan;
overflow: auto;
/* расшириться вниз захватить float'ы */
}
.header {
line-height: 60px;
background: yellow;
}
.inner {
margin: 1em;
font-size: 130%;
}
#avatar {
float: left;
margin: 0 1em .5em 0;
border: 1px solid black;
text-align: center;
background: white;
}
img {
display: block;
position: relative;
z-index: 1001;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div class="header">Шапка</div>
<div class="column-left">
<div class="inner">
<h3>Персонажи:</h3>
<ul>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Сова</li>
<li>Кролик</li>
</ul>
</div>
</div>
<div class="column-right">
<div class="inner">
<h3>Винни-Пух</h3>
<div id="avatar">
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
надпись.
</p>
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
в 1954; между этими датами — ряд трагических событий германской истории.</p>
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
</div>
</div>
<footer id="foot"></footer>
<script>
var b;
var avatar = document.querySelector("#avatar");
var clone = avatar.cloneNode(true);
clone.className = "fixed";
var coords = avatar.getBoundingClientRect();
var foot = document.querySelector("#foot").getBoundingClientRect();
document.onscroll = function(e) {
var _scroll = window.pageYOffset || document.documentElement.scrollTop;
if(_scroll > coords.bottom && _scroll<foot.top) {
document.body.appendChild(clone);
} else {
document.body.removeChild(clone);
}
if (_scroll>foot.top-coords.height){
clone.style.top = (document.querySelector("#foot").getBoundingClientRect().top - coords.height) + 'px';
}
}
</script>
</body>
</html>