我需要在我正在编码的投资组合上的网格上制作导航栏的帮助。我有两个主要部分,一个导航栏和主要内容,我希望它是一个带有静态导航栏的全高滚动页面。

因为它们在第一行中重叠,所以如果我将内容放在z-index的前面,则可以滚动内容,但不能选择导航栏。反之亦然。

我这样做正确吗?

简短说明:我希望自己的内容在具有静态导航栏的同时在中间垂直滚动到边缘。由于它们当前在同一网格中重叠,因此我无法访问其中任何一个。

如果我将内容设置为第二行,则由于导航栏切出了我的内容,我的内容没有达到顶部。

我试图在Nav中将其设置为绝对值,但是我觉得自己违反了惯例



.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr .5fr 1fr;
  grid-template-rows: 1fr;
  grid-area: 100%;
}

.topnav {
  display: flex;
  align-items: baseline;
  min-height: 8vh;
  margin-left: 10%;
  margin-right: 10%;
  grid-column: 1 / span 4;
  grid-row: 1;
  z-index: 1;
}

#scrollcontent {
  overflow: scroll;
  height: 100vh;
  grid-column: 1 / span 4;
  grid-row: 1;
  z-index: 1;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  align-items: center;
  align-content: center;
}

<div class="wrapper">
  <div class="topnav">
    <div class="logo">
      <a href="About.html">
					Me
				</a>
    </div>
    <div class="navlinks">
      <a href="#work" id="work">WORK</a>
      <a href="About.html" id="about">ABOUT</a>
    </div>
    <div id="scrollcontent">
      <div class='column'>
        <div class='projimg1'>
          <img src="img/Hero%20image%20for%20projects(larger).png" alt="Project" class="responsive">
          <div class="proj1text">
            <h3>Heading</h3>
            <h3>Lorem Ispem abcdefg hijklmnop</h3>
          </div>
          /* list of projects */
        </div>
      </div>
    </div>

最佳答案

如果使用z-index.navlinks放在顶部,将#scrollcontent放在下面,则#scrollcontent的第一行可以滚动到.navlinks栏下方。如果在#scrollcontent上放置padding-topmargin-top,其高度与.navlinks相同,则第一行将无法进入.navlinks,因为顶部的填充/边距位于此处。

另外,为确保内容触及浏览器视图的边缘,请考虑使用html, body { padding: 0; margin: 0; }。我认为Bootstrap是自动执行的。

09-11 19:56
查看更多