javascripthtmlcssgridcss-position

sidebar navigation sticky position move little upwards at end of scroll why?

I created a sidebar div and a main content div. The main content contains a large amount of text, making the page scrollable. I want the sidebar to remain sticky while scrolling the page. I achieved this using position: sticky and a top value, but when I scroll, the sidebar sticks in the middle, and at the end of the scroll, it moves up. Why does this happen?

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

:root {
    --light-color: #EDF4F2;
    --dark-color: #31473A;
    --medium-color: #D3CAE2;
}

body {
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--light-color);
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
            'top-nav-area top-nav-area'
            'side-area main-area'
            'side-area main-area'
            'side-area footer-area';


}

.top-navigation {
    top: 0;
    position: sticky;
    grid-area: top-nav-area;
    background-color: var(--medium-color);
    padding: 2em;
}

.side-navigation {
    min-height: calc(100vh - 82px);
    top: 82px;
    position: sticky;
    align-self: start;
    grid-area: side-area;
    background-color: var(--dark-color);
    overflow-y: auto;


}

.main-content {
    grid-area: main-area;
}

.footer {
    grid-area: footer-area;
    background-color: var(--light-color);
}
<body>
    <nav class="top-navigation">Navigation</nav>
    <aside class="side-navigation">side-navigation</aside>
    <main class="main-content">
          <p>large  text</p>
    </main>
    <footer class="footer" id="footer">footer</footer>
</body>

output i get start middle end

Solution

  • In your case, just remove the min-width CSS property from the body tag because when text is more than screen height, the scrollbar appears, and min-width is considered the scrollbar width also. So content will overflow. Use the below code to fulfill your requirement.

    Add the dummy text to the main content for the vertical scroll.

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

:root {
    --light-color: #EDF4F2;
    --dark-color: #31473A;
    --medium-color: #D3CAE2;
}

body {
    min-height: 100vh;
    background-color: var(--light-color);
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'top-nav-area top-nav-area'
        'side-area main-area'
        'side-area main-area'
        'side-area footer-area';
}

.top-navigation {
    top: 0;
    position: sticky;
    grid-area: top-nav-area;
    background-color: var(--medium-color);
    padding: 2em;
}

.side-navigation {
    min-height: calc(100vh - 82px);
    top: 82px;
    position: sticky;
    align-self: start;
    grid-area: side-area;
    background-color: var(--dark-color);
    overflow-y: auto;
}

.main-content {
    grid-area: main-area;
}

.footer {
    grid-area: footer-area;
    background-color: var(--light-color);
}
    <body>
    <nav class="top-navigation">Navigation</nav>
    <aside class="side-navigation">side-navigation</aside>
    <main class="main-content">
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </main>
    <footer class="footer" id="footer">footer</footer>
</body>