Javascript-форум - Прилипающий блок

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Прилипающий блок (https://javascript.ru/forum/events/72582-prilipayushhijj-blok.html)

Dilettante_Pro,
читайте пост номер 9

рони,
объясняю-при нажатии кнопки в не клонированном элементе я получаю данные из строки следующим образом- document.getElementById("имя оригинального инпута").value, но в клонированном элементе как мне при нажатии кнопки получить значение только уже из клонированной строки?

Вот ваш пример из пост№9 в работающем виде с небольшим изменением
(строка 103)
Вы это имеете в виду?

<!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 if(clone.parentNode){
	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>';
 div.innerHTML = document.getElementById("first").value;
 document.getElementById("result").appendChild(div);

}
</script>
</body>
</html>

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

<!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>

Я правильно вас понял, что вы избавились от клонирования. а теперь блок ездит и фиксируется, да?

Возникла такая проблема-код

window.addEventListener("DOMContentLoaded", function() {
    //тут код, объявление переменных
    document.addEventListener("scroll", function(e) {
        //тут еще код
    });
});

если я его ставлю в нижнюю часть html страницы прилипание работает, а если выношу весь этот код в отдельный js файл и подключаю в заголовках-то работать перестает и скрипт не выполняет прилипания блока. Думал может это связанно с document.addEventListener? Не подскажете как этот код сделать так, чтобы работал в отдельном файле и чтобы не загружать html страницу.
Спасибо

рони,
отдохни и не набивай себе пустых сообщений. Не понял-значит не твое.

Я максимально доступно ведь объяснил, почему это непонятно?

Начинающий-Js-кодер,
не могу вам помочь, не буду вам мешать, удалил свои сообщения.

Начинающий-Js-кодер,
Пропало желание вам помогать

Отчего так, милейший?