如何保持粘性导航栏和顶部锚点？

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

我对 html 和 css 还很陌生，正在为我正在学习的课程设计一个模拟作品集。这是一个单页作品集，我们收到的指示是每个部分的高度必须为 100%。这破坏了我的粘性导航，但经过一些研究，我发现了一个提示，添加以下代码将允许 100% 的高度要求，并允许我的粘性导航正常工作：

html {
    overflow: hidden;
  }
  
body {
    overflow: scroll;
  }

情况确实如此，但经过更多测试后，我意识到该 css 的 html 溢出隐藏部分破坏了导航栏中的 #top 导航。所有其他导航都按其应有的方式工作。

这是我的标记：

/* RESET */

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 16px;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}


/* END RESET */


/* BELOW CODE ALLOWS STICKY NAV TO ALWAYS BE VISIBLE WITHOUT SETTING A SPECIFIC HEIGHT */

html {
  overflow: hidden;
}

body {
  overflow: scroll;
}


/* SETTING DEFAULT HEIGHT, WIDTH, FONT-FAMILY, AND DISPLAY PROPERTY ON ALL SECTIONS */

section {
  width: 100%;
  height: 100%;
  display: flex;
  font-family: finalsix;
}


/* STICKY NAVBAR CONTAINER */

.navBar {
  height: 60px;
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #707070;
}


/* WORDMARK IN NAVBAR */

.navBar .wordmark {
  padding-left: 60px;
  font-size: 28px;
}


/* ANCHOR LINKS IN NAVBAR */

.navBar .navLinks a {
  padding-right: 60px;
  font-size: 20px;
  text-decoration: none;
  color: #707070;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Crescent Devworks</title>
  <!-- FAVICON -->
  <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
  <!-- CSS -->
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <!-- NAVIGATION -->
  <section class="navBar">
    <div class="wordmark">crescent devworks</div>
    <div class="navLinks">
      <a href="#top">home</a>
      <a href="#about">about me</a>
      <a href="#projects">my work</a>
      <a href="#contact">contact</a>
    </div>
  </section>

  <!-- HERO -->
  <section class="hero">
    <div class="logo"></div>
    <div class="tagline">
      <h1>crescent devworks</h1>
      <p>web development tailored to your needs</p>
    </div>
  </section>

  <!-- ABOUT -->
  <section class="about" id="about">
    <div class="memoji">
      <h1 class="sectionTitle">about me</h1>
      <div class="memojiImg"></div>
    </div>
    <div class="textContainer"></div>
  </section>

  <!-- PROJECTS -->
  <section class="projects" id="projects">
    <div class="project"></div>
    <div class="memoji">
      <h1 class="sectionTitle">my work</h1>
      <div class="memojiImg"></div>
    </div>
    <div class="project"></div>
  </section>

  <!-- CONTACT -->
  <section class="contact" id="contact">
    <div class="contactForm"></div>
    <div class="memoji">
      <h1 class="sectionTitle">contact</h1>
      <div class="memojiImg"></div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer>
    <div class="copyright">&copy; crescent devworks</div>
  </footer>
</body>

</html>

强调一下，截面高度必须为 100%。哦 - 没有 JS...还没有越过那条线。

最后，如果您有解决方案，您能解释一下为什么它有效吗？我真的很想学习，所以我不只是希望有人给我我不理解的代码。我真的很感激！

html css navbar nav
1个回答
0
投票
<a href="#top">home</a>

所有其他链接都是通过其 ID 定位页面中的元素，但是这个链接使用“魔法”

#top
- 通常有效（尽管我现在无法判断，如果只是“按照惯例”，或者如果那样的话）实际上在任何地方都指定了），但显然不知何故在这里停止了正常工作。

也明确地使用此元素来定位某个元素，那么它应该可以工作。

/* RESET */

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 16px;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}


/* END RESET */


/* BELOW CODE ALLOWS STICKY NAV TO ALWAYS BE VISIBLE WITHOUT SETTING A SPECIFIC HEIGHT */

html {
  overflow: hidden;
}

body {
  overflow: scroll;
}


/* SETTING DEFAULT HEIGHT, WIDTH, FONT-FAMILY, AND DISPLAY PROPERTY ON ALL SECTIONS */

section {
  width: 100%;
  height: 100%;
  display: flex;
  font-family: finalsix;
}


/* STICKY NAVBAR CONTAINER */

.navBar {
  height: 60px;
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #707070;
}


/* WORDMARK IN NAVBAR */

.navBar .wordmark {
  padding-left: 60px;
  font-size: 28px;
}


/* ANCHOR LINKS IN NAVBAR */

.navBar .navLinks a {
  padding-right: 60px;
  font-size: 20px;
  text-decoration: none;
  color: #707070;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Crescent Devworks</title>
  <!-- FAVICON -->
  <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
  <!-- CSS -->
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <!-- NAVIGATION -->
  <section class="navBar">
    <div class="wordmark">crescent devworks</div>
    <div class="navLinks">
      <a href="#home">home</a>
      <a href="#about">about me</a>
      <a href="#projects">my work</a>
      <a href="#contact">contact</a>
    </div>
  </section>

  <!-- HERO -->
  <section class="hero" id="home">
    <div class="logo"></div>
    <div class="tagline">
      <h1>crescent devworks</h1>
      <p>web development tailored to your needs</p>
    </div>
  </section>

  <!-- ABOUT -->
  <section class="about" id="about">
    <div class="memoji">
      <h1 class="sectionTitle">about me</h1>
      <div class="memojiImg"></div>
    </div>
    <div class="textContainer"></div>
  </section>

  <!-- PROJECTS -->
  <section class="projects" id="projects">
    <div class="project"></div>
    <div class="memoji">
      <h1 class="sectionTitle">my work</h1>
      <div class="memojiImg"></div>
    </div>
    <div class="project"></div>
  </section>

  <!-- CONTACT -->
  <section class="contact" id="contact">
    <div class="contactForm"></div>
    <div class="memoji">
      <h1 class="sectionTitle">contact</h1>
      <div class="memojiImg"></div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer>
    <div class="copyright">&copy; crescent devworks</div>
  </footer>
</body>

</html>

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