Фиксированное меню с помощью Javascript

[volshebnyi]

Здравствуйте!

Уважаемые коллеги, подскажите, пожалуйста, как решить две проблемы:

1. Есть фиксированное меню, которое должно появляться при скролле (450 px от верха документа). Вот что у меня получилось - https://jsfiddle.net/9re1o9ta/

Почему-то при прокрутке страница начинает прыгать и меню (которое должно быть зафиксировано) просто мигает. Как быть в данной ситуации?

2. В этом же меню мне необходимо при той же прокрутке (450 px от верха документа) добавить html элементы:

var elementToWrap = document.querySelector('header').innerHTML;
var wrapper = "<div class='header-inner'>" + elementToWrap + "</div>";
document.querySelector('header').innerHTML = wrapper;

var node = document.createElement("a");
node.setAttribute("href", "#");
node.className = "logo-mini";
var textnode = document.createTextNode("Текст для альта");
node.appendChild(textnode);
var headerInner = document.querySelector(".header-inner");
headerInner.insertBefore(node, headerInner.childNodes[0])

Когда я прописываю это в том же условии, то элементы создаются при каждом скроллинге. Подскажите, пожалуйста, как корректно создать HTML элементы при скролле?

Заранее благодарен за помощь!

Edited September 2, 2016 by volshebnyi

[by chris]

1. У меня ничего не мигает. Какой бразуер?

2. https://jsfiddle.net/9re1o9ta/1/

[by chris]

@volshebnyi, https://jsfiddle.net/9re1o9ta/2/

[volshebnyi]

Спасибо огромное! В вашем варианте тоже уже не мигает.

Браузер - Chrome.

И еще - подскажите, пожалуйста, как корректно удалить созданные при скроле элементы:

var elementToWrap = document.querySelector('header').innerHTML;
var wrapper = "<div class='header-inner'>" + elementToWrap + "</div>";
document.querySelector('header').innerHTML = wrapper;

var node = document.createElement("a");
node.setAttribute("href", "#");
node.className = "logo-mini";
var textnode = document.createTextNode("Текст для альта");
node.appendChild(textnode);
var headerInner = document.querySelector(".header-inner");
headerInner.insertBefore(node, headerInner.childNodes[0])

 когда страница прокручивается в исходное положение?

Edited September 3, 2016 by volshebnyi

[volshebnyi]

В 02.09.2016 в 22:45, by chris сказал:

1. У меня ничего не мигает. Какой бразуер?

2. https://jsfiddle.net/9re1o9ta/1/

Спасибо огромное! В вашем варианте тоже уже не мигает.

Браузер - Chrome.

И еще - подскажите, пожалуйста, как корректно удалить созданные при скроле элементы:

var elementToWrap = document.querySelector('header').innerHTML;
var wrapper = "<div class='header-inner'>" + elementToWrap + "</div>";
document.querySelector('header').innerHTML = wrapper;

var node = document.createElement("a");
node.setAttribute("href", "#");
node.className = "logo-mini";
var textnode = document.createTextNode("Текст для альта");
node.appendChild(textnode);
var headerInner = document.querySelector(".header-inner");
headerInner.insertBefore(node, headerInner.childNodes[0])

 когда страница прокручивается в исходное положение?