navbarım sayfayı kaydırdıkça üst kısımda benimle birlikte gelmiyor ,.navbar-scrolled kısmında background ekliyorum sayfayı aşağı çektiğimde değişim oluyor ama olduğu yerde duruyor yardımcı olabilecek var mı?

header.php

<div class="top-bar">
        <a href="<?php echo $Ayar_Genel['Sosyal_Instagram'] ?>" class="social-icon"><i class="fab fa-instagram"></i></a>
        <a href="<?php echo $Ayar_Genel['Sosyal_Tiktok'] ?>" class="social-icon"><i class="fab fa-tiktok"></i></a>
        <a href="<?php echo $Ayar_Genel['Sosyal_Youtube'] ?>" class="social-icon"><i class="fab fa-youtube"></i></a>
    </div>


       <!-- Navbar -->
       <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="images/Logo.png" alt="Trakya Brothers" class="img-fluid Navbar-Logo" style="max-height: 50px;">
        </a>
        <div class="d-flex">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button type="button" class="btn Mobile-Panel-Btn" onclick="window.open('https://panel.trakyabrothers.com/', '_blank')">Panel</button>
        </div>
        <div class="collapse navbar-collapse header-navbar" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Ana Sayfa</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Hakkımızda</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Galeri</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sponsorlar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Üyeler</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">İletişim</a>
                </li>
            </ul>
</nav>

style.css

/* Basic styling for the entire page */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #181c24; /* Arka plan rengi */
    backdrop-filter: blur(10px); /* Glass blur efekti */
    min-height: 100vh; /* Sayfa içeriği minimum ekran yüksekliği kadar */
    overflow-x: hidden; /* Yatay taşmayı önle */
}


@font-face {
    font-family: 'Pepsi';
    src: url('../fonts/pepsi.ttf') format('truetype'); /* Adjust the path if necessary */
    font-weight: normal;
    font-style: normal;
}
/* Üst sabit bar (top-bar) */
.top-bar {
    top: 0;
    left: 0;
    width: 100%;
    height: 30px; /* Yükseklik 25px */
    background-color: #FF7E41; /* Saydam koyu arka plan */
    z-index: 1100; /* Navbar'dan bir katman yukarıda */
    display: flex;
    justify-content: flex-end; /* İkonları sağa hizala */
    align-items: center;
    padding-right: 20px; /* Sağdan boşluk */
}
/* Sosyal medya ikonları */
.top-bar .social-icon {
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-left: 10px; /* İkonlar arası boşluk */
    color: #fff; /* Beyaz ikon rengi */
    font-size: 16px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.top-bar .social-icon:hover {
    opacity: 0.8; /* Hover'da saydamlık efekti */
}
/* Navbar styling */
.navbar {
    position: fixed; /* Change to absolute */
    top: 35px; /* Üst barın hemen altında olacak şekilde */
    left: 0;
    right: 0; /* Sağ kenarı sıfırlamak için */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
    background-color: transparent; /* Arka plan rengi şeffaf */
    padding: 0 0px; /* Soldan ve sağdan 10px boşluk */
}
/* When scrolled, change the navbar to fixed */
.navbar-scrolled {
    position: fixed; /* Change to absolute */
    top: 35px; /* Üst barın hemen altında olacak şekilde */
    z-index: 1000;
    padding: 0 0px; /* Soldan ve sağdan 10px boşluk */
}
/* Navbar container styling */
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: center; /* Logo ve menüleri merkeze hizala */
    width: 100%; /* Tam genişlik */
    max-width: calc(100% - 20px); /* Soldan ve sağdan 10px boşluk için maksimum genişlik */
    margin: 0 auto; /* Ortalamak için otomatik margin */
    background-color: #ffffff; /* Container arka plan rengi */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Köşeleri yuvarlamak için */
    padding: 0 50px; /* İçeriye Doğru Almak İçin */
}
/* Navbar link styling */
.navbar-nav .nav-link {
    font-family: Arial, sans-serif;
    color: #181c24;
    transition: color 0.3s ease, transform 0.3s ease;
    margin: 0 5px;
}
.navbar-nav .nav-link:hover {
    font-family: Arial, sans-serif;
    color: #FF7E41;
    transform: scale(1.1);
}
/* Navbar link styling */
.navbar-nav {
    display: flex;
    justify-content: center; /* Menü öğelerini ortala */
    flex-grow: 1;
}
/* Navbar item styling */
.navbar-nav .nav-item {
    margin: 0 15px; /* Menü öğeleri arasında boşluk */
}
/* Navbar toggler icon'u sağ üst köşeye yerleştirme */
.navbar-toggler {
    position: fixed; /* Sabit pozisyon */
    right: 15px; /* Sağdan boşluk */
    top: 50px; /* İstediğiniz yüksekliği ayarlayın */
    z-index: 1050; /* Diğer elementlerin üstünde kalmasını sağlar */
    border: none; /* Kenarlığı kaldır */
    margin-right: 10px; /* İkon ile buton arasında boşluk */
}
/* Navbar toggle icon'u beyaz yapmak için */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}