Положение заголовка Sticky не работает ни в одном браузере ⇐ Html

[Anonymous]

Я работаю над этим проектом и хочу, чтобы заголовок был прикреплен к вершине, когда он прокручивается. В настоящее время он расположен в Row_1, поэтому, когда он прокручивается вверх, он должен придерживаться. Проблема в том, что неважно, как усердно я пытался решить это. Пожалуйста, если кто-нибудь может взглянуть на код и сказать мне, что случилось, он будет высоко ценится. < /P>
Спасибо !!
  // Adjust header size on scroll (Desktop Only)
 window.addEventListener("scroll", function () {
   if (window.innerWidth > 768) {
     const header = document.querySelector(".header");
     const linked = document.querySelector(".linked");
     const navContent = document.querySelector(".nav-content");

     if (window.scrollY > 50) {
       header.style.height = "7vh"; // Reduce header height
       linked.style.width = "30%"; // Scale down logo width
       navContent.style.height = "100%";
     } else {
       header.style.height = "11vh"; // Reset header height
       linked.style.width = "50%"; // Reset logo width
       navContent.style.height = "100%";
     }
   }
 });
document.addEventListener("DOMContentLoaded", function () {
   const header = document.getElementById("header");
   const smallLogo = document.querySelector(".small-logo");
   const bigLogo = document.querySelector(".big-logo");

   let lastScrollY = window.scrollY;

   function handleScroll() {
       const currentScrollY = window.scrollY;

       if (currentScrollY > lastScrollY) {
           // Scrolling down - Hide big logo, show small logo
           bigLogo.style.opacity = "0";
           smallLogo.style.opacity = "1";
       } else {
           // Scrolling up - Show big logo, hide small logo
           bigLogo.style.opacity = "1";
           smallLogo.style.opacity = "0";
       }

       lastScrollY = currentScrollY;
   }

   window.addEventListener("scroll", handleScroll);
});
< /code>
[id="P0716828012"].page {
width: 100%;
height: auto%;
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
pointer-events: auto;

}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.page-content{
padding: 0;
}
.flex_container{
display: block;
height: auto;
}
/* General Header Styling */

.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 11vh;
position: sticky !important;
top: 0;
z-index: 10;
transition: height 0.5s ease-in-out;
background: linear-gradient(180deg, #FF7B42 0%, #F2A1FF 100%);

}

.logo-container {
height: 100%;
flex: 3;
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
transition: transform 0.5s ease-in-out;
}

.big-logo {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
width: 100%;
}

/* Small logo (only visible when header sticks) */
.small-logo {
opacity: 0;
position: absolute;
transform: translateY(20px); /* Start slightly below */
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
width: 25% !important;
filter: brightness(0) saturate(100%) invert(96%) sepia(24%) saturate(3664%) hue-rotate(6deg) brightness(107%) contrast(103%);

}

/* When header becomes sticky */
.header .scrolled .big-logo {
opacity: 0 !important;
transform: scale(1.1) translateY(-10px);
}

.header .scrolled .small-logo {
opacity: 1;
transform: scale(1) translateY(0);
}
.background{
position: absolute;
z-index: 0;
width: 100%;
}
.upper{
z-index:1;
width: auto;
display: flex;
flex-direction: column;
}
.big_logo{
z-index: 1;
margin-top: 2vw;
width: 100%;
justify-items: center;
}

.underlogo{
display: flex;
flex-direction: row;
margin-top: 2vw;
width: 100%;
justify-content: space-between;
z-index: 1;
justify-items: center;
}
< /code>





Private Studios,
7 days a week.
Your dedicated space to
practice, create, and grow.
BOOK NOW









☰
ESTRELAR U
SHOP
FAQs





Подробнее здесь: https://stackoverflow.com/questions/794 ... ny-browser