0

I made the main section and a side section and I want the side section to be sticky until the end of the content I tried many ways but it didn't work please help

<body>
 <main>
        <div class="container">
            <div class="main-content">
                <section>
                    <h1>Lorem, ipsum dolor.</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, quia illo! Quasi quis esse facere. Modi tenetur nesciunt pariatur distinctio perspiciatis, consequuntur, porro dignissimos, sit quae quas veritatis quos maxime?</p>
                    <img src="" alt="">
                </section>
            </div>
        </div>
    </main>
    
    <!-- main -->
    <!-- aside -->
    
    <aside>
        <div class="container">
            <div class="aside-content">
                <section>
                    <h1>Lorem, ipsum dolor.</h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed saepe voluptates id nam fugit rem illo dolorum expedita aliquam, odio harum impedit ratione quasi, distinctio mollitia, eum totam odit! Eos!</p>
                    <img src="" alt="">
                </section>
            </div>
        </div>
    </aside>
</body>
<!-- aside -->
Rijil
  • 58
  • 10
ilj
  • 9
  • 1

1 Answers1

1

An element with position: sticky; is positioned based on the user's scroll position.

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>



<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
Rijil
  • 58
  • 10