спасибо. Только у меня вопрос. Сделать фиксированное меню получилось, но как сделать чтобы когда меню зафиксировалось у нее появилась тень и сделать отступ с левого края?
Или как добавить класс к элементу после фиксирования. Вот примеры скриптов, которые фиксируют меню в моем случае
var scrollFloat = function () {
'use strict';
var app = {};
app.init = function init (node) {
if (!node || node.nodeType !== 1) {
throw new Error(node + ' is not DOM element');
}
handleWindowScroll(node);
};
function handleWindowScroll (floatElement) {
window.onscroll = function () {
if (window.scrollY > floatElement.offsetTop) {
floatElement.style.position = 'fixed';
floatElement.style.top = '0';
floatElement.style.left = '0';
} else {
floatElement.style.position = '';
floatElement.style.top = '';
}
};
}
return app;
}();
!(function () {
'use strict';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function arrayRandom(arr) {
var max = arr.length - 1,
min = 0;
return arr[getRandomInt(min, max)];
}
window.onload = function () {
var scrollHint = document.createElement('div'),
backgrounds = ['orange', 'lightBlue', 'yellow', 'lightGreen'],
p = document.createElement('p');
p.innerHTML = 'Еще вниз…';
scrollHint.style.marginTop = '100px';
scrollHint.style.paddingLeft = '0px';
scrollHint.style.paddingRight = scrollHint.style.paddingLeft;
scrollHint.appendChild(p);
for (var i = 0, cloned; i < 20; i++) {
cloned = scrollHint.cloneNode(true);
cloned.style.background = arrayRandom(backgrounds);
document.body.appendChild(cloned);
}
};
})();
На странице такой код перед тегом </body>
<script>
// Инициализация обработчика плавающего элемента
scrollFloat.init(document.getElementById('dj-main104'));
</script>
делал согласно примеру
https://code-live.ru/post/js-float-scroll/
