Question

初始负载： picture of navbar

滚动后： picture of navbar after scroll

我正在尝试在视口顶部设置固定的导航。因此，当您向下滚动页面时，导航始终可见。我的问题是，我的导航栏品牌设置在导航栏的左侧，而我指向页面其余部分的链接设置在右侧。当我将固定位置添加到导航栏品牌时，它可以很好地工作（当我向下滚动页面时，该品牌保持可见），但是无论我在将固定位置添加到任何其他类，id或涉及链接的元素时尝试了什么设置在右侧，它们最终会固定在左侧并覆盖品牌或直接位于品牌下方。我不知道为什么会这样。

我尝试在导航栏中添加固定到各个类的位置，但是没有运气。我还尝试使用float：right！important强制将项目向右移动。我发现的大多数文章都建议添加位置：固定到.nav类，但是当我这样做时，这些项目将推到左侧。我在导航中包括了html以及导航的CSS，在导航中链接到的背景视频和模态，以防万一有某种原因可能导致问题。谢谢你的帮助！非常感谢。

HTML

<nav class="navbar">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="#home"><h3>allicndev</h3></a>
        </div><!-- /navbar-header -->
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#about" class="db-line">About</a></li>
          <li class="active"><a href="#portfolio">Portfolio</a></li>
          <li class="active">
            <!-- <a href="#" data-toggle="modal" data-placement="top" title="Resume" data-target="#modalResume"><span>Resume</span></a> -->
            <a href="#" data-toggle="modal" data-target="#myModal">Resume</a>
          </li>
          <li class="active"><a href="#skills">Skills</a></li>
          <li class="active"><a href="#contact">Contact</a></li>
        </ul><!-- /nav navbar-nav navbar-right -->
      </div><!-- /container-fluid -->
    </nav>
    <!-- /navigation -->
    <!-- modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h4 id="myModalLabel" class="modal-title">Resume</h4>
      </div><!-- /modal-header -->
      <div class="modal-content">
        <embed id="modal-embed" src="assets/anresume.pdf">
      </div><!-- /modal-content -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div><!-- /modal-footer -->
    </div><!-- /modal fade -->
    <!-- /modal -->

CSS

* {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  position: relative;
}
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 17px;
}
#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
.container-fluid {
  padding-right: 30px;
  /* position: fixed; */
}
nav {
  height: 75px;
  display: border-box;
  color: white;
  font-size: 12px;
  text-align: center;
  position: fixed;
  /*z-index: 10px;*/
}
nav.navbar {
  width: 100%;
}
.navbar-header {
  position: fixed;
}
.nav.navbar-nav.navbar-right > li {
  padding-top: 15px;
  margin: 10px;
}
.nav > li > a {
  display: inline;
  padding-left: 0;
  padding-right: 0;
  padding-top: 5px;
  background-color: transparent;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover {
  background-color: transparent;
}
a.db-line {
  transition: white .3s linear;
}
a {
  color: white;
  text-decoration: none;
}
a > h3 {
  color: white;
  text-decoration: none;
}
a:hover {
  color: #f97f04;
}
/* a:visited {
  color: #EDCF10;
} */
.modal {
  display: none;
  height: 100%;
  left: 10px;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal.open {
  display: block;
}
.modal-header,
.modal-footer {
  height: 75px;
}
.modal-content,
.modal-footer {
  width: 100%;
}
.modal-footer {
  bottom: 0px;
}
#modal-embed {
  width: 100%;
  height: 75vh;
}

如果可能的话，我希望品牌（“ allicndev”）位于左上方，链接（“ about”，“ portfolio”，“ resume”，“ skills”和“ contact”）则位于右侧顶部和整个导航栏保持这种可见状态，因为您可以滚动页面或单击指向各个部分的链接。

Answer 1

是的，滚动时应将fixed-top类别用于固定顶部导航栏

<div class="navbar fixed-top">

</div>

Answer 2

您的示例中的标记是针对Bootstrap 3的，因此，如果您已标记了此Bootstrap 4，那就是问题1。

假设Bootstrap 4是正确的，则添加正确的标记和类似乎可以创建您正在描述的内容：https://jsfiddle.net/4rtjcpzm/1/

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<nav class="navbar navbar-expand fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#home">allicndev</a>
    <div class="collapse navbar-collapse in" id="navbarCollapse">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item active"><a href="#about" class="nav-link db-line">About</a></li>
      <li class="nav-item "><a href="#portfolio" class="nav-link">Portfolio</a></li>
      <li class="nav-item ">
        <!-- <a href="#" data-toggle="modal" data-placement="top" title="Resume" data-target="#modalResume"><span>Resume</span></a> -->
        <a href="#" class="nav-link" data-toggle="modal" data-target="#myModal">Resume</a>
      </li>
      <li class="nav-item "><a class="nav-link" href="#skills">Skills</a></li>
      <li class="nav-item "><a class="nav-link" href="#contact">Contact</a></li>
    </ul><!-- /nav navbar-nav navbar-right -->
    </div>
  </div><!-- /container-fluid -->
</nav>

ml-auto（如果检查源代码，则为margin-left: auto类，这些类可使链接一直向右滑动。 fixed-top和sticky-top都会将导航栏粘贴到视口的顶部。

sticky-top可能是最好的类，因为不需要降低正文内容（在小提琴的CSS部分中看到的padding-top），但这取决于您是否知道（或关心）您的大多数预期访客是否会使用browser that supports position: sticky;。

顺便说一句，请注意> h3（锚元素内的H3元素）不是（默认情况下）有效的HTML； <a>是一个内联元素，<h3>是一个块元素，根据HTML spec无效。

有没有一种方法可以使我的导航栏保持在右侧，并在滚动时始终显示在页面顶部？

2 个答案: