为什么我的导航栏没有固定在它的位置？

【问题标题】：Why isn't my navbar fixed in it's position?为什么我的导航栏没有固定在它的位置？
【发布时间】：2020-04-12 21:29:24
【问题描述】：

我已经制作了一个对角滚动页面，但是当我应用插件使其以这种方式滚动时，导航栏不再固定，而且我的部分没有居中，我的意思是它们是垂直显示而不是对角显示，我不知道如何以这种方式显示它们，有什么解决方案吗？我的首要任务是导航栏，但如果我能在一个问题上解决这两个问题，那就更好了。感谢社区！

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background-color: #900c3f;
  font-family: Montserrat;
  height: 100vh;
  color: #F5F5F5;
  overflow: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

img {
  width: 130px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
}

nav {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #ff5733;
}

.nav-links li a {
  display: inline-block;
  padding-bottom: 4px;
  background-image: linear-gradient(#F5F5F5, #F5F5F5);
  background-position: 0 100%;
  /*OR bottom left*/
  background-size: 0% 5px;
  border-radius: 5px;
  background-repeat: no-repeat;
  transition: background-size 0.3s, background-position 0s 0.3s;
  /*change after the size immediately*/
}

.nav-links li a:hover {
  background-position: 100% 100%;
  /*OR bottom right*/
  background-size: 100% 5px;
  border-radius: 5px;
}


/*.nav-links li a{
          display: inline-block;
        }

        .nav-links li a:after {
          content: '';
          width: 0;
          height: 5px;
          display: block;
          background: #F5F5F5;
          transition: 300ms;
          border-radius: 5px;
        } */

.nav-links li a:hover:after {
  width: 100%;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 80%;
}

.nav-links li {
  list-style: none;
}

.nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 17vh;
  background-color: #ff5733;
  display: flex;
  flex-direction: column;
  font-size: 80%;
  align-items: center;
  width: 50%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
}

.nav-links li {
  opacity: 0;
}

.burger {
  display: block;
}


}
@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
.nav-active {
  transform: translateX(0%);
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
}
section h1 {
  font-size: 4rem;
  justify-content: center;
  align-items: center;
}
section p {
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}

/* Section Images */
section#home {
  background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
  background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
  background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
  background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
  background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->


<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
  <header>
    <nav>
      <img src="Graphic logo.png" alt="Subworld Productions">
      <ul class="nav-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#submit">Submit</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
      <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </nav>
    <section id="home">
      <h1>HOME PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="portfolio">
      <h1>PORTFOLIO PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="submit">
      <h1>SUBMIT PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="contact">
      <h1>CONTACT PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="about">
      <h1>ABOUT PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </header>
  <!-- <script src="javascript/app.js"></script>
  <script src="skrollr.js"></script>-->
  <script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
    skrollr.init();
  </script>
</body>

【问题讨论】：

标签： html css scroll navbar


【解决方案1】：

您的 CSS 存在一些问题。首先是导航链接属性有多个声明。我将它们分组并调整它们（稍后会更多）我还整理了你的 css 以按顺序排列你的 css：首先导航链接然后导航链接 li 然后导航链接 li a 等，因为 css 是按该顺序读取的。您在一个 css 类中有 display:flex; 和 position:absolute - 这些冲突，我删除了绝对定位。

然而，真正让你的 ul 失效、使链接不可见的是 translateX - 将你的链接翻译 100% 会使你的链接移出视线。我评论了这一点。原样（现在）您的链接显示，悬停动画，并在单击时滚动到适当的部分。还有一点需要注意：您的部分中的网址后面有两个分号。我在您发布的代码和 sn-p 代码中都更正了这一点。

希望对你有帮助

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background-color: #900c3f;
  font-family: Montserrat;
  height: 100vh;
  color: #F5F5F5;
  overflow: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

img {
  width: 130px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
}

nav {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #ff5733;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 80%;
  /*   position: absolute;
  right: 0px;*/
  height: 10vh;
  top: 17vh;
  background-color: #ff5733;
  flex-direction: row;
  font-size: 80%;
  align-items: center;
  /*transform: translateX(100%);*/
  transition: transform 0.5s ease-in;
}

.nav-links li {
  list-style: none;
  color: #ffffff;
}

.nav-links li a {
  display: inline-block;
  color: #ffffff;
}

.nav-links li a:after {
  content: '';
  width: 0;
  height: 5px;
  display: block;
  background: #F5F5F5;
  transition: 300ms;
  border-radius: 5px;
}

.nav-links li a:hover:after {
  width: 100%;
}

.nav-links li {
  opacity: 1;
}

.burger {
  display: block;
}


@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
.nav-active {
  transform: translateX(0%);
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
}
section h1 {
  font-size: 4rem;
  justify-content: center;
  align-items: center;
}
section p {
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}

/* Section Images */
section#home {
  background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
  background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
  background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
  background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
  background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->


<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
  <header>
    <nav>
      <img src="Graphic logo.png" alt="Subworld Productions">
      <ul class="nav-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#submit">Submit</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
      <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </nav>
    <section id="home">
      <h1>HOME PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="portfolio">
      <h1>PORTFOLIO PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="submit">
      <h1>SUBMIT PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="contact">
      <h1>CONTACT PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="about">
      <h1>ABOUT PAGE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </header>
  <!-- <script src="javascript/app.js"></script>
  <script src="skrollr.js"></script>-->
  <script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
    skrollr.init();
  </script>
</body>

【讨论】：

  • 附录：我不确定您所说的对角滚动是什么意思？通常是垂直页面还是水平页面？ sn-p 水平显示您的导航。
  • 感谢您为我整理！是的，我在那里弄得一团糟……我所说的对角滚动是字面意思，我使用了一个插件，使页面向右对角滚动，看起来非常好，但我会放弃它.谢谢！！
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode