英文:
How can I position the navbar on the right hand side of the screen?
问题
如何将一个导航栏放在屏幕左侧并且在右侧可以滚动而不移动导航栏？
我想要实现的效果类似于我将要放置的这些图片：
我尝试过为导航栏使用position: sticky;，并为右侧列使用flex-direction: column;，但没有成功。
英文:
How can i put a nav that uses half of the screen on the left side and that on the right side i can scroll down without the nav moving
What I'm trying to get is something like the images that I'm going to put:
I tried using position: sticky; for the nav and using flex-direction: column; for the right hand column but it didn't work.
答案1
得分: 2
这个问题的最有效解决方法之一是使用一个包含两列的网格。作为网格容器的直接子元素（在这种情况下是 body），您可以使用一个 aside 元素和一个 main 元素作为主要内容。
在 aside 元素中，您可以放置 nav 并使用 position: sticky; top: 0; 使导航栏保持在视口内。
* {
box-sizing: border-box;
}
body {
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
nav {
position: sticky;
top: 0;
min-height: 100vh;
}
/* 仅用于可视化目的 */
main {
min-height: 5000vh;
border: 2px dashed red;
}
nav {
border: 2px dashed blue;
}
<aside>
<nav>This is the navbar</nav>
</aside>
<main>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</main>
希望对您有所帮助。
英文:
One of the most efficient ways to solve this is the usage of a 2-column grid. As a direct child of the grid container (body in this case), you use an aside element and a main element as the main content.
Within the aside you can place the nav and use position: sticky; top: 0; to keep the navbar within the viewport.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
body {
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
nav {
position: sticky;
top: 0;
min-height: 100vh;
}
/* for visualisation purpose only */
main {
min-height: 5000vh;
border: 2px dashed red;
}
nav {
border: 2px dashed blue;
}
<!-- language: lang-html -->
<aside>
<nav>This is the navbar</nav>
</aside>
<main>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</main>
<!-- end snippet -->
答案2
得分: -1
position: fixed; 可能是你正在寻找的。如果你将其应用于导航栏，它将始终保持在原位，即使滚动也是如此。请注意，当你这样做时，其他元素可能会出现在导航栏后面。
另外，如果你提供了一些我们可以尝试的代码，那将非常有帮助。没有代码，这是我所能做的最好的。
英文:
position: fixed; is probably what you are looking for. If you apply it to the nav, it will always stay where it is, even if you scroll. Be aware, that when you do that, other elements might end up behind the nav.
Also, it'd be very helpful, if you provided some code we could try. Without the code, this is the best I can do.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论