粘性导航栏正在推动内容下降

时间：2018-03-12 12:37:16

标签： html css twitter-bootstrap bootstrap-4

我试图创建一个双层导航栏，顶层有公司信息，如电话，电子邮件，社交链接等。

第二层是主导航栏，应该是粘性和透明的。

但是现在，它正在推动下一个div（第一个）向下并创建这个空白空间而不是悬停在div之上。我无法真正找到它的错。我使用的是Bootstrap 4。

＆＃13;
＆＃13; 
#top-nav{
  position: relative;
  z-index: 1000;
}

.top-nav{
  background-color: #FFF;
  height: 40px;
}

.top-nav a{
  color:#696969;
}

.top-nav a:hover{
  color:#FF6700;
}

.top-nav p{
  margin-left: 50px;
  position: relative;
  top:5px;
  color: #696969;
}
.top-nav .social-links a{
  padding-right: 20px !important;
  position: relative;
  top: 5px;
  color: #696969;
}

.top-nav .social-links a:hover{
  color: #ff6700;
}

#content{
  height:100%;
  width:100%;
}
.navbar-brand img{
  width: 300px ;
  height: auto ;
}

@media screen and (max-width:500px){
  .navbar-brand img{
    width:250px;
  }
  #content{
    /* top: - */
  }
}

@media screen and (min-width: 500px){
  .navbar-brand img{
    margin-left: 20px;
  }
}

.first{
  height: 100vh;
  background-color: #000;
  position: relative;
  z-index:0;
  /* position:relative;
  top:-115px; */
}
.second{
  min-height: 100vh;
  background-color: #676767;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="top-nav" class="container-fluid text-center">
      <div class="container row top-nav justify-content-between ml-auto mr-auto">
        <div class="call .col-auto mr-auto">
          <p><b>Contact: </b><a href="tel:+11111111">+111111111</a></p>
        </div>
        <div class="call .col-auto mr-auto">
          <p><b>Email: </b><a href="emailto:contact@xyz.com">contact@axyz.com</a></p>
        </div>
        <div class="col-auto social-links">
          <a href="#"><i class = "fab fa-facebook-f"></i></a>
          <a href="#"><i class = "fab fa-skype"></i></a>
          <a href="#"><i class = "fab fa-linkedin-in"></i></a>
        </div>
      </div>
    </div>
    <nav class="navbar navbar-expand-md navbar-dark bg-transparent sticky-top">
      <a class="navbar-brand" href="index.html">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Career</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="first"></div>

    <div class="second"></div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

粘性定位元素将占据它的空间，因为它相对定位直到它滚动过去并变得粘稠（然后它没有说明该空间应该发生什么）。

不知道下面是什么，但是我刚刚把粘性类移到了一个单独的容器div上，并且假设高度为0且溢出可见，这样就不会占用任何空间

#top-nav{
  position: relative;
  z-index: 1000;
}

.top-nav{
  background-color: #FFF;
  height: 40px;
}

.top-nav a{
  color:#696969;
}

.top-nav a:hover{
  color:#FF6700;
}

.top-nav p{
  margin-left: 50px;
  position: relative;
  top:5px;
  color: #696969;
}
.top-nav .social-links a{
  padding-right: 20px !important;
  position: relative;
  top: 5px;
  color: #696969;
}

.top-nav .social-links a:hover{
  color: #ff6700;
}

#content{
  height:100%;
  width:100%;
}
.navbar-brand img{
  width: 300px ;
  height: auto ;
}

@media screen and (max-width:500px){
  .navbar-brand img{
    width:250px;
  }
  #content{
    /* top: - */
  }
}

@media screen and (min-width: 500px){
  .navbar-brand img{
    margin-left: 20px;
  }
}

.first{
  height: 100vh;
  background-color: #000;
  position: relative;
  z-index:0;
  /* position:relative;
  top:-115px; */
}
.second{
  min-height: 100vh;
  background-color: #676767;
}
.sticky-top {
  height:0; 
  overflow:visible;
  box-sizing:border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="top-nav" class="container-fluid text-center">
      <div class="container row top-nav justify-content-between ml-auto mr-auto">
        <div class="call .col-auto mr-auto">
          <p><b>Contact: </b><a href="tel:+11111111">+111111111</a></p>
        </div>
        <div class="call .col-auto mr-auto">
          <p><b>Email: </b><a href="emailto:contact@xyz.com">contact@axyz.com</a></p>
        </div>
        <div class="col-auto social-links">
          <a href="#"><i class = "fab fa-facebook-f"></i></a>
          <a href="#"><i class = "fab fa-skype"></i></a>
          <a href="#"><i class = "fab fa-linkedin-in"></i></a>
        </div>
      </div>
    </div>
    <div class="sticky-top">
    <nav class="navbar navbar-expand-md navbar-dark bg-transparent">
      <a class="navbar-brand" href="index.html">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Career</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    </div>
    <div class="first"></div>

    <div class="second"></div>

https://developer.mozilla.org/en-US/docs/Web/CSS/position

答案 1 :(得分：0)

而不是使用粘贴顶部使用固定顶部，粘性属性将保持元素在正常流中的空间，这就是你看到空间的原因.. 

#top-nav{
  position: relative;
  z-index: 1000;
}

.top-nav{
  background-color: #FFF;
  height: 40px;
}

.top-nav a{
  color:#696969;
}

.top-nav a:hover{
  color:#FF6700;
}

.top-nav p{
  margin-left: 50px;
  position: relative;
  top:5px;
  color: #696969;
}
.top-nav .social-links a{
  padding-right: 20px !important;
  position: relative;
  top: 5px;
  color: #696969;
}

.top-nav .social-links a:hover{
  color: #ff6700;
}

#content{
  height:100%;
  width:100%;
}
.navbar-brand img{
  width: 300px ;
  height: auto ;
}

@media screen and (max-width:500px){
  .navbar-brand img{
    width:250px;
  }
  #content{
    /* top: - */
  }
}

@media screen and (min-width: 500px){
  .navbar-brand img{
    margin-left: 20px;
  }
}

.first{
  height: 100vh;
  background-color: #000;
  position: relative;
  z-index:0;
  /* position:relative;
  top:-115px; */
}
.second{
  min-height: 100vh;
  background-color: #676767;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/fa-svg-with-js.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/normalise.css">
    <link rel="stylesheet" href="css/style.css">    

    <div id="top-nav" class="container-fluid text-center">
      <div class="container row top-nav justify-content-between ml-auto mr-auto">
        <div class="call .col-auto mr-auto">
          <p><b>Contact: </b><a href="tel:+11111111">+111111111</a></p>
        </div>
        <div class="call .col-auto mr-auto">
          <p><b>Email: </b><a href="emailto:contact@xyz.com">contact@axyz.com</a></p>
        </div>
        <div class="col-auto social-links">
          <a href="#"><i class = "fab fa-facebook-f"></i></a>
          <a href="#"><i class = "fab fa-skype"></i></a>
          <a href="#"><i class = "fab fa-linkedin-in"></i></a>
        </div>
      </div>
    </div>
    <nav class="navbar navbar-expand-md navbar-dark bg-transparent fixed-top">
      <a class="navbar-brand" href="index.html">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Career</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="first"></div>

    <div class="second"></div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="js/fontawesome-all.min.js"></script>

答案 2 :(得分：0)

如果您希望第二个导航栏背景透明，则必须确保可以在不同的背景颜色上看到导航栏中的内容颜色... 

.sticky-top .navbar-nav .nav-link,
.sticky-top .navbar-nav .active .nav-link {
    color: #cc00dd;
}

https://www.codeply.com/go/ypn9gieMza

相关问题
最新问题