- Вынести в переменные (а лучше в константы
const) все элементы HTML. Например, как сделано с PanelMenuLinks
- Использовать вместо, например
querySelectorAll("#block_panel_menu")[0] getElementById("block_panel_menu")
А там, где надо нескольким элементам из массива присвоить значения, использовать циклы forEach
- Вразброс обращаетесь к элементам, разделите на блоки, делайте отступы логические (пустые строки) между блоками кода, чтоб было понятнее.
С табуляцией у Вас что-то...
Отредактировал Ваш код:
const
header = document.querySelector('header'),
logotip = document.getElementById('logotip'),
registion = document.getElementById('registion'),
vhod = document.getElementById('vhod'),
block_panel_menu = document.querySelectorAll('#block_panel_menu')
function block_panel_menu_Height(height) {
block_panel_menu.forEach(element => element.style.height = height + 'px')
}
// vhod.innerHTML = '<img style="width: 20px; height: 20px;" src="SiteImage/logo_vhod.svg">'
let logo_vhod = document.createElement('img')
logo_vhod.style.width = '20px'
logo_vhod.style.height = '20px'
logo_vhod.src = './SiteImage/logo_vhod.svg'
window.onscroll = () => {
if (pageYOffset > 100) {
header.style.height = '50px'
logotip.style.opacity = '0'
logotip.style.marginTop = '-20px'
registion.style.display = 'none'
vhod.appendChild(logo_vhod)
vhod.style.background = 'none'
vhod.style.width = '30px'
PanelMenuLinks.style.background = 'none'
PanelMenuLinks.style.zIndex = '-1'
PanelMenuLinks.style.marginTop = '-45px'
PanelMenuLinks.style.fontSize = '13px'
PanelMenuLinks.style.color = '#fff'
PanelMenuLinks.style.borderTop = '0px'
block_panel_menu_Height(49)
block_panel_menu_children.style.top = '10px'
}
else {
header.style.height = '70px'
logotip.style.marginTop = '0px'
logotip.style.opacity = '1'
registion.style.display = 'block'
vhod.innerText = 'Регистрация'
vhod.style.background = '#626262'
vhod.style.width = '100px'
block_panel_menu_Height(70)
block_panel_menu_children.style.top = '20px'
PanelMenuLinks.style.marginTop = '0px'
PanelMenuLinks.style.background = '#E7E7E7'
PanelMenuLinks.style.borderTop = '10px solid #fff'
PanelMenuLinks.style.fontSize = '18px'
PanelMenuLinks.style.color = '#000'
}
}
Мои рекомендации (кроме тех, что я описал выше):
- Правильно использовать функции получения доступа к элементам HTML
- ID обычно даётся единственному элементу в документе, в остальных случаях используется класс
- Использовать innerText там где можно обойтись и без innerHTML
- Создавать элементы средствами JS, а не встраиванием HTML кода через innerHTML
- Пишите функции (пусть даже маленькие), если есть повторения в коде: так код будет и красивее и читабельнее и удобнее в использовании
- Давать классам и id русские имена типа
vhod -- не самая лучшая идея. Используйте переводчик, чтобы перевести интересующие Вас названия на английский.
- Выберите способ именования переменных: либо
block_panel_menu, либо blockPanelMenu. У Вас же встречаются оба варианта. В JavaScript принято использовать вариант, называемый Camel Case, то есть, второй вариант: blockPanelMenu.
Ну а так по мелочи: можно использовать одинарные кавычки
' вместо двойных
";
изучите стрелочные функции типа
() => {} . Часто можно использовать именно их -- они и короче писать и не захламляют код лишними словами;
Слушатели событий можно записать короткой записью, например:
window.addEventListener('scroll', функция) можно написать
window.onscroll = функция (в большинстве случаев просто добавляется 'on' в начало названия события); Желательно писать в начале скрипта строчку 'use strict' -- строгий режим -- гугл расскажет о нём лучше меня
Задавайте вопросы, что не понятно, на всё отвечу!