粘性元素不与同级元素一起向上滚动？

var lastScrollTop = 0;

document.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  document.querySelector('.right-sidebar').classList.toggle('scroll_down', st > lastScrollTop);
  lastScrollTop = st <= 0 ? 0 : st;
}, false);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3fr;
  min-height: 100vh;
  font-size: 2rem;
}

.inner-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left-sidebar,
.right-sidebar,
.main {
  margin: 0 1rem;
}

.left-sidebar,
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  height: 95%;
  margin-top: 2.5rem;
}

.left-sidebar {
  background-color: burlywood;
  height: 100vh;
  position: sticky;
  top: 0;
}

.main {
  background-color: tomato;
  height: 3000px;
}

.right-sidebar {
  background-color: cadetblue;
  position: sticky;
  min-height: 100vh;
  height: 1000px;
  top: 0;
}

.scroll_down {
  top: unset;
  bottom: 0;
  margin-top: auto;
}

.fixed-header {
  background-color: black;
  color: white;
  position: fixed;
  width: auto;
  top: 0;
}

<div class="container">
  <div class="left-sidebar">
    <div>
      <div>left sidebar</div>
      <div>top</div>
    </div>
    <div>bottom</div>
  </div>
  <div class="inner-grid-container">
    <div class="main">
      <div class="fixed-header">fixed header</div>
      <div class="content">
        <div>
          <div>main</div>
          <div>top</div>
        </div>
        <div>bottom</div>
      </div>
    </div>
    <div class="right-sidebar">
      <div class="fixed-header">fixed header</div>
      <div class="" style="margin-top: 2.5rem;">
        <div>
          <div>right sidebar</div>
          <div>top</div>
        </div>
        <p style="font-size: 1rem;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iste, repudiandae quasi, cumque mollitia animi, libero dolores aliquam ipsam optio veritatis tempore eius. Nemo magni molestiae quis similique itaque dolorem quisquam, neque odit debitis
          earum deleniti ut natus distinctio ipsa repellendus tempore voluptatem cupiditate sunt delectus quo? Pariatur, quis modi natus molestiae quibusdam quod, dolore perferendis deserunt deleniti fugit, fuga voluptas a numquam accusamus quam aliquam?
          Ipsa necessitatibus perspiciatis sunt eaque, incidunt vitae, labore autem, quos voluptatibus numquam commodi earum non iusto. Sapiente quis, praesentium maxime odit, eligendi libero illo necessitatibus deserunt nisi, assumenda culpa ducimus
          cum debitis dolores sequi?</p>
        <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="150" height="300" alt="">
        <div style="position: absolute; bottom: 0;">bottom</div>
      </div>
    </div>
  </div>
</div>

var lastScrollTop = 0;

document.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; 
      document.querySelector('.right_parent').classList.toggle('scroll_down',st > lastScrollTop);
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

    .left
    {
        position: sticky;
        top: 0;
        left: 0;
        height: 100%;
    }

    .head
    {
        position: sticky;
        top: 0;
        left: 0;
        background: white;
    }

    .right_parent
    {
        position: sticky;
        height: 100%;
        top: 0 !important;
        margin-top: 0;
    }


    .scroll_down
    {
        position: sticky;
        top: -50% !important;
        margin-top: inherit;
    }



    .left a
    {
        text-decoration: none;
        font-size: 20px;
        color: black;
    }
    .left button
    {
        padding: 12px;
        color: white;
        border:none;
        background: #1D9BF0;
        border-radius: 30px;
        font-size: 18px;
        font-weight: bold;
    }

    .section_pane
    {
        border:1px solid rgba(0,0,0,0.1);
    }

    .section
    {
        border-bottom:1px solid rgba(0,0,0,0.1);
    }

    .head button
    {
        background: white;
        border:none;
        
        padding: 10px;
    }

    .active
    {
        font-weight: bold;
        border-bottom: 5px solid #1D9BF0 !important;
    }

    .search
    {
        background: rgba(0,0,0,0.05);
        border-radius: 20px;
        padding: 10px;
        width: 80%;
    }

    .mid
    {
        min-height: 100vh;
    }

    .right > div
    {
    border:1px solid rgba(0,0,0,0.05);
    border-radius: 15px;
    }

    .right h3
    {
        font-size: 20px;
        font-weight: bold;
    }

    .right h5
    {
        font-size: 18px;
    }

    .right h6
    {
        font-size: 14px;
    }

    .right p
    {
        font-size: 12px;
    }

    .fill
    {
        border:none !important;
        background: rgba(0,0,0,0.02);
    }
  

<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/font/bootstrap-icons.css">

<div class="container"> 
<div class="row align-items-stretch">   
<div class="col-3 left d-flex flex-column px-5">
    <h3 class="mb-4"><i class="bi bi-twitter"></i></h3>
    <a href="#/" class="mb-3"><i class="bi bi-house me-2"></i> Home</a>
    <a href="#/" class="mb-3"><i class="bi bi-search me-2"></i> Explore</a>
    <a href="#/" class="mb-3"><i class="bi bi-bell me-2"></i> Notification</a>
    <a href="#/" class="mb-3"><i class="bi bi-envelope me-2"></i> Messages</a>
    <a href="#/" class="mb-5"><i class="bi bi-card-list me-2"></i> List</a>
    <button>Post</button>
</div>
<div class="col-6 mid d-flex flex-column flex-grow-1 section_pane px-0">
    <div class="head pt-2 section px-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
        <button><i class="bi bi-arrow-left"></i></button>
        <div class="search px-4"><i class="bi bi-search"></i></div>
        <button><i class="bi bi-three-dots"></i></button>
        </div>
        <div class="d-flex">
            <button class="w-100 active">Top</button>
            <button class="w-100">Latest</button>
            <button class="w-100">People</button>
            <button class="w-100">Media</button>
            <button class="w-100">Lists</button>
        </div>
    </div>
    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>


    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>

    <div class="content section py-3 px-3">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>


</div>
<div class="col-3 right_parent pt-3">
    <div class="right">

    <div class="px-3 py-2 mb-3">
        <h3>Search Filter</h3>
    </div>
    <div class="fill px-3 py-2 mb-3">
        <h5>Whats Happening 1</h5>
        <div class="mb-2">
            <p class="mb-0">US Open</p>
            <h6>US Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>
    </div>

    <div class="fill px-3 py-2 mb-3">
        <h5>Whats Happening 2</h5>
        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>
    </div>


    <div class="fill px-3 py-2 mb-3">
        <h5>Whats Happening 3</h5>
        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">Abcdef</p>
            <h6>Abcdef 2024</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">France Open</p>
            <h6>France Open Tennis 2023</h6>
        </div>
    </div>

    <div class="fill px-3 py-2 mb-3 bottom">
        <h5>Whats Happening 4</h5>
        <div class="mb-2">
            <p class="mb-0">StackOverflow</p>
            <h6>AI Conference</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">StackOverflow</p>
            <h6>AI Conference</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">StackOverflow</p>
            <h6>AI Conference</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">StackOverflow</p>
            <h6>AI Conference</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">StackOverflow</p>
            <h6>AI Conference</h6>
        </div>

        <div class="mb-2">
            <p class="mb-0">StackOverflow</p>
            <h6>AI Conference</h6>
        </div>
    </div>

    </div>
</div>

</div>  
</div>