html - Twitter Bootstrap 部分滚动问题

Question

在我正在开发的网站上，我的导航栏中有一个链接应该将我带到 ID 为 About 的部分，但是它似乎忽略了我的导航栏的定位，因此丢掉了位置紧一点。解决此问题的任何帮助将不胜感激

问题的可视化

点击前:http://imgur.com/akrheOX 点击后:http://imgur.com/zlmL6GQ

导航栏代码

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" rel="home" href="#" title="Virtual Currency Converter"><img style="max-width:350px; margin-top: -20px;"
                                                                                                    src="./assets/img/vicuco_brand.png"> 
                </a>
            </div>


            <div id="navbar" class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#About">About</a>
                </li>

                <li><a href="#config" id="config"><span class="glyphicon glyphicon-cog gi-2x"></span></a></li>
              </ul>
            </div><!-- nav-collapse -->

        </div>
    </nav>

关于章节代码

        <section class="bg-primary" id="About">
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class=" text-center">
                        <h2 class="section-heading" id="AboutHeader">About Us</h2>
                        <div id="AboutSubtitle">
                            <p>
                                Vicuco stands for <strong>Virtual Currency Converter</strong>. <br><br>
                                Indeed, it is our goal to allow for simple and easy conversion <br>
                                of the virtual currencies among themselves, as well as to foreign currencies. <br><br>
                                We are an aggregator. That means we aggregate virtual currency <br>
                                trading data from all major virtual currency exchanges, in order <br>
                                to show you a near real-time conversion rate. <br><br>
                                We will send you in the right direction, if you need to buy, sell, or <br>
                                exchange virtual currency.<br><br>
                            </p>
                            <p>
                                Follow us on <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/vicucodotcom">
                                <span class="fa fa-twitter fa-2x"></span></a> and check out our
                                <strong><a href="http://vicuco.com/blog/" target="_blank">blog</a></strong>
                                for our latest developments! 
                            </p>

                        </div>
                    </div>

                </div>
            </div>
        <img src="assets/img/cloud.png" id="cloud" width="25%" height="100%">

        </div>
        </section>

Answer 1

您使用的是固定页眉，因此它的位置和大小将被其他页面内容忽略。解决此问题的一种方法是使用执行以下操作的小脚本:

• 检测navbar 高度
• 在 navabar 元素上单击 - 滚动页面但将其从视口(viewport)顶部偏移
• 偏移量由我们刚刚检测到的 navbar 高度决定。

您可以在下面看到它已添加。

我说“一种方法”是因为有另一种方法可以偏移 anchor (see here)

$(document).ready(function() {
  $(".navbar ul li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ 
        scrollTop: $(this.hash).offset().top - $('.navbar').height()
    }, 600);
});
  
});

#one, #two, #three {
  height: 1000px;
  }

#one {
  background: pink;
  }
#two {
  background: salmon;
  }
#three {
  background: lightsalmon;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http:////maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Offset Scroll</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#one">Section one</a></li>
          <li><a href="#two">Section two</a></li>
          <li><a href="#three">Section three</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <div class="container">
    <section id="one"></section>
    <section id="two"></section>
    <section id="three"></section>
    </div>
</body>