Question

当我点击导航栏上的特定链接时，它会向下滑动到页面的该部分。但由于我使用的是固定导航栏，因此它隐藏了该部分的一些内容。

例如：当我点击导航菜单上的关于时，页面会滑到该部分。以下示例“关于我”是重叠的导航栏。

About Me (This part is Hidden below navigation menu)
Some Random Text Here
Some More
And More....

我想要做的是，当我点击一个链接时，它应该滑动到足以使该部分的每个东西都可见。（这意味着页面应该向上滑动直到导航栏的底部）

<body>
    <div class="nav navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
          <ul class="pull-left">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About Me</a></li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
      </div>
    </div>

    <div class="parallax-overlay"></div>
    <div class="jumbotron">
      <div class="container">
        <img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
        <h1>Nakib Momin</h1>
        <p>Student Blogger And Software Developer</p>
        <button type="button" class="btn btn-primary"><a href="">Learn More</a></button>
      </div>
    </div>

#CSS

body, html{height: 100%}

.nav a {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}


.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
}

.jumbotron {

  background-image:url('main.jpg');
  height: 100%;
  font-family: 'Hammersmith One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: center;
}

.jumbotron .container {
  position: relative;
  top:120px;
}

.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
  position: relative;
  z-index: 3;
}

.jumbotron img
{
  margin-bottom: 5px;
  padding: 2px;
}

.jumbotron button
{
  margin-top: 18px; 
  width: 130px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  padding: 10px;
  font-weight: bold;

}

.jumbotron p {
  font-size: 12px;
  color: #e3e3e3;

}

.jumbotron a {
  font-size: 15px;
  color:#fff;
  text-decoration: none;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

Answer 1

我之前遇到过固定导航栏重叠内容的问题，解决方法是在~~固定导航栏~~主体中添加填充。看看这个答案：twitter bootstrap navbar fixed top overlapping site。

编辑：我复制问题的made a JSFiddle - 看起来向主体添加填充顶部修复了固定导航栏与呈现内容的正文重叠的问题：< / p>

body {
    height: 100%;
    padding-bottom: 65px;
}

修复了Twitter bootstrap中的导航栏，导致隐藏部分的顶部内容

1 个答案: