Question

这是我的代码：

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

/********* global styles *******/
img:not(.nav-logo) {
  width: 100%;
  display: block;
}

/* header */
.header {
  display: flex;
  /* flex-direction: column; */
}

/* navbar */
.nav-bar {
  position: sticky;
}
.nav-wrap {
  min-width: 3rem;
  max-height: 100vh;
  display: flex;
  /* flex-wrap: wrap; */
  /* flex-direction: row; */
}

.nav-header {
  display: flex;
  /* flex-direction: column; */

  max-width: 3.4rem;
  background: transparent;
  padding: 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* align-content: center; */
}
.nav-toggle {
  margin: auto auto;
  /* align-self: center; */
  /* justify-self: center; */
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.45rem;
  cursor: pointer;
  transition: var(--mainTransition);
  margin-bottom: 10.5rem;
}

.nav-toggle:hover,
.nav-link:hover {
  transform: scale(1.2);
}

.nav-links {
  margin: auto auto;
  height: 22.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-link {
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--mainTransition);
}
/* hero */
.hero {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
    url(https://dummyimage.com/821x1082/d415d4/fff) center/cover no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- style -->

    <!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Културата Ще Спаси Света</title>
  </head>
  <body>
    <!-- header -->
    
    <header id="home" class="header">
      <!-- navbar -->
      <nav class="navbar">
        <div class="nav-wrap">
          <!-- nav header -->
          <div class="nav-header">
            <button
              type="button"
              class="nav-toggle"
              id="nav-toggle"
              aria-label="nav toggler"
            >
              <i class="fas fa-bars"></i>
            </button>
            <div class="nav-links">
              <i class="fas fa-volleyball-ball nav-link"></i>
              <i class="fas fa-paint-brush nav-link"></i>
              <i class="fas fa-music nav-link"></i>
              <i class="fas fa-pray nav-link"></i>
              <i class="fas fa-globe-americas nav-link"></i>
            </div>
            <!-- nav links -->
          </div>
        </div>
      </nav>

      <!-- hero -->
      <div class="hero">
      </div>
    </header>
    <section>More content<section>
  </body>
</html>

这是现在的样子

我希望侧边导航栏在我向下滚动时保持固定。并占据右侧的所有高度。

任何帮助都会很棒。

谢谢

我添加这个是因为 StackOverflow 不允许我在没有更多我认为不需要的细节的情况下发布它。

Answer 1

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

/********* global styles *******/
img:not(.nav-logo) {
  width: 100%;
  display: block;
}

/* header */
.header {
  display: flex;
  flex-direction: column; 
  position:fixed;
  left:0;
  top:0;
}

/* navbar */
.nav-bar {
  position: sticky;
}
.nav-wrap {
  min-width: 3rem;
  max-height: 100vh;
  display: flex;
  /* flex-wrap: wrap; */
  /* flex-direction: row; */
}

.nav-header {
  display: flex;
  /* flex-direction: column; */

  max-width: 3.4rem;
  background: transparent;
  padding: 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* align-content: center; */
}
.nav-toggle {
  margin: auto auto;
  /* align-self: center; */
  /* justify-self: center; */
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.45rem;
  cursor: pointer;
  transition: var(--mainTransition);
  margin-bottom: 10.5rem;
}

.nav-toggle:hover,
.nav-link:hover {
  transform: scale(1.2);
}

.nav-links {
  margin: auto auto;
  height: 22.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-link {
  background: transparent;
  border: none;
  /* transform: translateX(-0%); */
  /* padding: 1rem; */
  outline: none;
  color: var(--primaryColor);
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--mainTransition);
}
/* hero */
.hero {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
    url("./imgs/hero.jpeg") center/cover no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- style -->

    <!--<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css" />-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Културата Ще Спаси Света</title>
  </head>
  <body>
    <!-- header -->
    
    <header id="home" class="header">
      <!-- navbar -->
      <nav class="navbar">
        <div class="nav-wrap">
          <!-- nav header -->
          <div class="nav-header">
            <button
              type="button"
              class="nav-toggle"
              id="nav-toggle"
              aria-label="nav toggler"
            >
              <i class="fas fa-bars"></i>
            </button>
            <div class="nav-links">
              <i class="fas fa-volleyball-ball nav-link"></i>
              <i class="fas fa-paint-brush nav-link"></i>
              <i class="fas fa-music nav-link"></i>
              <i class="fas fa-pray nav-link"></i>
              <i class="fas fa-globe-americas nav-link"></i>
            </div>
            <!-- nav links -->
          </div>
        </div>
      </nav>

      <!-- hero -->
      <div class="hero">
      </div>
    </header>
    <section>More content<section>
  </body>
</html>

Answer 2

将导航从 HEADER 中取出，放在 BODY 标签正下方，使用“位置：固定；高度：100%；”使用 CSS。

滚动时使侧边导航栏保持固定

2 个答案: