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

rqcrx0a6  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(103)

我对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

2条答案

按热度按时间
af7jpaap

af7jpaap1#

<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>
赞(0）分享  回复(0）举报  12个月前
xoshrz7s

xoshrz7s2#

试试这个

/* 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>
赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com