Question

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

问题的可视化

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

后点击

Navbar代码

    <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项目 - 滚动页面但将其从视口顶部偏移
偏移量由我们刚刚检测到的navbar高度确定。

您可以在下方看到它。

我说'一种方法'，因为有一种替代方法可以使锚点偏移（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>

Twitter Bootstrap部分滚动问题

问题的可视化

Navbar代码

关于部门代码

1 个答案: