<!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;
}
.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%;
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 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';
}
}
function add(){
var div = document.createElement('div');
div.innerHTML = '<br>Новый элемент</a><br>';
document.getElementById("result").appendChild(div);
}
</script>
</body>
</html>
Вот код. Если вставляю в функцию add() в конец- foot = document.querySelector("#foot").getBoundingClientR ect(); все становится хорошо, но в консоли часто теперь пишет:
|
Цитата:
|
NotFoundError: Node was not found
document.body.removeChild(clone);
|
Почему возникает и как с этим бороться?