侧边栏导航粘性位置在滚动结束时向上移动很小，为什么？

问题描述 投票：0回答：1

我创建了一个侧边栏 div 和一个主要内容 div。主要内容包含大量文本，使页面可滚动。我希望侧边栏在滚动页面时保持粘性。我使用position:sticky和top值实现了这一点，但是当我滚动时，侧边栏粘在中间，在滚动结束时，它向上移动。为什么会出现这种情况？

* {
    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>

我得到的输出 start middle end

javascript html css grid css-position
1个回答
0
投票

在您的情况下，只需从 body 标记中删除 min-width CSS 属性，因为当文本超过屏幕高度时，会出现滚动条，并且 min-width 也被视为滚动条宽度。所以内容会溢出。使用下面的代码来满足您的要求。

* {
    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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.