Как я могу исправить изображение с центром вибрации, когда ширина изменяется? ⇐ Javascript

[Anonymous]

Я новичок и пытаюсь создать навигационную панель в небольшом проекте.
Все хорошо, но когда ширина меняется, у нее есть вибрация и встряхивание:
Мой логотип в центре навигационной панели будет встряхнуть, когда ширина меняется < /p>

Код: Выделить всё

const stickyElement = document.getElementById('headerMenu');
window.addEventListener('scroll', () => {
const rect = stickyElement.getBoundingClientRect();
if (rect.top  {
stickyElement.style.width = "76vw";
})
} else {
if (window.innerWidth 
body {
text-align: center;
padding: 0px 4px 0px 4px;
margin: 0px;
height: 2000px;
background-image: linear-gradient( to bottom, black,rgb(87, 87, 87));
background-size: contain;
}
@font-face {
font-family: Lato;
src: url(Lato/Lato-Light.ttf);
}
a {
text-decoration: none;
}
h1, #header {
margin: 0px;
padding: 0px;
}
#headerMenu {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0px 20px;
backdrop-filter: blur(10px) grayscale(1) brightness(0.7);
height: 50px;
border-radius: 10px 10px 20px 20px;
position: sticky;
top: 10px;
margin-top: 250px;
overflow: visible;
transition: width 1s ease;
}

#headerImg {
border-radius: 20px;
padding: 10px;
flex-shrink: 1;
flex-grow: 0;
margin: 0px 10px;
animation-name: scaleUpDown;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-duration: 1s;
transform: translateX(50%);
}
@media screen and (max-width:800px) {
#headerMenu {
width: 80%;
}
}

.headerSidesMenu {
align-items: center;
padding: 0px;
display: flex;
flex-basis: 45%;
list-style-type: none;
overflow-x: visible;
height: 100%;
scrollbar-width: none;
overflow-y: auto;
}
.headerSidesMenu > li {

margin: 0px;
height: 100%;
padding: 0px 0px;
font-family: Lato,monospace;
overflow-x: visible;
background-color: transparent;
transition: background-color .2s, transform .5s;
}
.headerSidesMenu > li > a {
color: white;
transform: translateY(-5%);
line-height: 0px;
margin: 0px;
display: flex;
align-content: center;
align-items: center;
overflow-x: visible;
padding: 0px 20px;
padding-top: auto;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.headerSidesMenu > li > a::after {
content: "♠";
position: absolute;
right: 0px;
opacity: 0;
transition: opacity 0.3s, right 0.5s, left 0.5s;
}
.headerSidesMenu > li:hover {
transition: background-color .2s, transform .5s;
transform: translateX(-7px);
}
.headerSidesMenu > li:hover > a::after {
right: 8px;
transition: opacity 0.3s, right 0.5s;
opacity: 1;
}
#rightMenu {
flex-direction: row-reverse;
}
#rightMenu > li:hover {
transition: background-color .2s, transform .5s;
transform: translateX(+7px);
}
#rightMenu > li > a::after  {
left: calc(-60% - 10px);
transition: opacity 0.3s, right 0.5s, left 0.5s;
}
#rightMenu > li:hover > a::after {
left: -60%;
transition: opacity 0.3s, right 0.5s, left 0.5s;
}
@keyframes scaleUpDown {
from {transform: scale(1);}
to {transform: scale(1.3);}
};
< /code>



My page testing
[*]






[list]
[url=myPageTesting.html]Home[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[/list]
[img]https://i.ibb.co/0yJ11hYF/myLogo.png[/img]
[list]
[*][url=myPageTesting.html]Home[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[*][url=soon.html]soon1[/url]
[/list]

Пожалуйста, помогите мне, как я могу решить эту проблему.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... is-changes