Question

我正在使用引导程序4并创建固定顶部navbar，设置好navbar href列表后，它会导航到我设置的位置，但是navbar覆盖了该部分的顶部。

这是我的HTML代码

    <!doctype html>
<html lang="en" id="section-Home">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<style>
  section {
    min-height: 250px;
  }
  .card-img-top {
    min-height: 250px;
    max-height: 350px;
  }
  .card-text {
    min-height: 150px;
    max-height: 350px;
  }
  .jumbotron {
    background-image: url("img/thumbs/2.png");
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
 html,body {
    overflow-x: hidden; 
    }
</style>

    <title>Hendra</title>
  </head>
  <body class="mt-5">


<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
  <a class="navbar-brand" href="#section-Home">Hendra S. Sirait</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#section-about">About</a>
      <a class="nav-item nav-link" href="#section-Portfolio">Portfolio</a>
      <a class="nav-item nav-link" href="#section-contact">Contact</a>
    </div>
  </div>
  </div>
</nav>


<div class="jumbotron jumbotron-fluid">
  <div class="container text-center">
    <img src="img/hendra.jpg" width="25%" class="rounded-circle img-thumbnail">
    <h1 class="display-4">Hendra S. Sirait</h1>
    <p class="lead">testing</p>
  </div>
</div>

<section id="section-about" class="about">
<div class="container">
  <div class="row mb-3">
    <div class="col text-center">
      <h2>About Me</h2>
    </div>
  </div>

  <div class="row justify-content-center mb-3">
    <div class="col-md-5 text-center">
      <p>testing</p>
    </div>
    <div class="col-md-5 text-center">
      <a href="documents/cv.pdf">
            <img src="documents/cv.png" width="40%" alt="cv image">
          </a>
          <br>
          <a href="documents/cv.pdf" target="_blank">Curriculum Vitae
            <i class="fas fa-external-link-alt openInNew"></i>
          </a>
    </div>
  </div>
</div>

</section>

<section id="section-Portfolio" class="Portfolio bg-light pb-4">

<div class="container">
  <div class="row m-3 pt-3">
    <div class="col text-center">
      <h2>Portfolio</h2>
    </div>
  </div>

  <div class="row mb-3 justify-content-center">
    <div class="col-md text-center">
      <div class="card" >
        <img class="card-img-top" src="img/thumbs/map.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">testing</h5>
          <p class="card-text">testing</p>
          <a href="" target="_blank" class="btn btn-primary">View Codes</a>
          <a href="" target="_blank" class="btn btn-info">View App</a>
        </div>
      </div>
    </div>
    <div class="col-md text-center">
      <div class="card" >
        <img class="card-img-top" src="img/thumbs/kamus.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">testing</h5>
          <p class="card-text">testing</p>
          <a href="" target="_blank" class="btn btn-primary">View Codes</a>
        </div>
      </div>
    </div>
    <div class="col-md text-center">
      <div class="card" >
        <img class="card-img-top" src="img/thumbs/wBlocker.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">testing</h5>
          <p class="card-text">
            testing</p>
          <a href="" target="_blank" class="btn btn-primary">View Codes</a>
        </div>
      </div>
    </div>
  </div>

  <div class="row mb-3 justify-content-center">
    <div class="col-md text-center">
      <div class="card" >
        <img class="card-img-top" src="img/thumbs/4.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" target="_blank" class="btn btn-primary">View Codes</a>
        </div>
      </div>
    </div>
    <div class="col-md text-center">
      <div class="card" >
        <img class="card-img-top" src="img/thumbs/5.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" target="_blank" class="btn btn-primary">View Codes</a>
        </div>
      </div>
    </div>
    <div class="col-md text-center">
      <div class="card" >
        <img class="card-img-top" src="img/thumbs/6.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" target="_blank" class="btn btn-primary">View Codes</a>
        </div>
      </div>
    </div>
  </div>
</div>
</section> 

<section id="section-contact" class="contact">
    <div class="row mb-5 pt-3">
      <div class="col text-center">
      <h2>Contact Information</h2>
      <h4>Feel free to contact me, or check out my social pages!</h4>
      </div>
    </div>
      <div class="footerContact">
        <div class="row justify-content-center">
          <div class="col-1">
            <p><a href=""><i class="fas fa-phone-volume fa-3x"></i></a></p>
          </div>
          <div class="col-1">
            <p><a href=""><i class="fas fa-mobile fa-3x"></i></a></p>
          </div>
          <div class="col-1">
            <p><a href=""><i class="fas fa-envelope fa-3x"></i></a></p>
          </div>
          <div class="col-1">
            <p><a href=""><i class="fab fa-github fa-3x"></i></a></p>
          </div>
          <div class="col-1">
            <p><a href=""><i class="fab fa-linkedin fa-3x"></i></a></p>
          </div>
        </div>
      </div>
    </div>
</section>

<footer class="bg-primary text-white text-center pb-3 pt-3">Copyright 2018</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/15.1.0/smooth-scroll.js"></script>  
   <script>
  var scroll = new SmoothScroll('a[href*="#section-"]');
</script>
  </body>
</html>

it cover portfolio text like this

I want it to be like this

我使用了cdnjs平滑滚动并放置

<script>
  var scroll = new SmoothScroll('a[href*="#section-"]');
</script>

平滑滚动有效，仅导航栏仍覆盖组合文本。请帮忙。

非常感谢。

Answer 1

您可以使用jQuery animate向您的平滑滚动添加偏移量：

    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
        'scrollTop': $target.offset().top-140
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

jQuery Smooth Scroll Offset

Bootstrap 4导航栏覆盖部分的头部

1 个答案: