<!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>Cкролл</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
}
.fixed {
position: fixed;
left: 0;
top: 0;
font-size: 130%;
width: 100%;
background: yellow;
}
footer {
position: relative;
top: 15px;
margin-bottom: 15px;
clear: both;
height: 800px;
background: #456;
}
</style>
<div id="s_bl">
<input type="text" size="80" id="first" class="text_input">
<input type="submit" value="Добавить элемент" onclick="add();" id="bdf">
</div>
<div id="result">
</div>
<footer id="foot"></footer>
<script>
var avatar = document.querySelector("#s_bl");//что подхватываем
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) {
avatar.className = "fixed";
} else {
avatar.className = "";
}
if (_scroll>foot.top-coords.height){
avatar.style.top = (document.querySelector("#foot").getBoundingClientRect().top - coords.height) + 'px';
}
}
function add(){
var div = document.createElement('div');
// div.innerHTML = '<br>Новый элемент</a><br>';
div.innerHTML = document.getElementById("first").value;
document.getElementById("result").appendChild(div);
}
</script>
</body>
</html>