我的导航栏不允许我向上滚动

Question

我有一个固定的导航栏，在从部分元素 1 和 2 向下和向上滚动时运行良好。问题是当它到达我的联系人的第 3 部分时，它不会向上滚动到任何其他部分。 此外，一旦导航栏到达第 3 部分，它就不能被选中。 请帮忙

<body class="text-center" style="background-color: #32e0c4;">

  <div id="section1" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="masthead mb-auto">
      <div class="inner" style="">

        <nav class="nav nav-masthead navbar-fixed-top" id="myNavbar">
          <a class="nav-link " href="#section1">Home</a>
          <a class="nav-link" href="#section2">Skillz</a>
          <a class="nav-link" href="#section3">Contact</a>
          <a class="nav-link dropdown dropdown-toggle" data-toggle="dropdown" href="#">Projects</a>

        </nav>

      </div>
    </header>

    <main style="margin-top:50px" role="main" class="inner cover">
      <h1 class="cover-heading">Hi I'm Shonte</h1>
      <h2 class="cover-heading"> A web developer</h2>

      <img class="shonprofile rounded-circle profilecenter " style="" src="images/shonblue2.png" alt="" width="300" height="300">


    </main>


  </div>

  <div id="section2" class="skillRow  container-fluid">
    <h1>Skills</h1>
    <div class="row">

      <div class="col-md-7 skillability">
        <p>HTML ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>CSS ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>JavaScript ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>Bootstrap ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>Nodejs ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>SQL ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>MongoDB ⭐️⭐️⭐️⭐️</p>
        <br>
        <p style="margin-bottom:10px">Mongoose ⭐️⭐️⭐️⭐️</p>


      </div>
      <div class="col-sm-3" style="margin-top:50px">
        <img src="images/laptop.png" alt="">
      </div>

    </div>

  </div>

  <div id="section3" class="container-fluid" style="background-color:#32e0c4 ">

    <form class="center_div">

      <div class="form-row">
        <h1 class="col-md-12" style="margin-top:20px">Contact Me</h1>
        <div class="form-group col-md-12" style="padding-top: 10px">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group col-md-12">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

      </div>
      <button type="submit" class="btn btn-primary" style="margin-bottom:10px">Submit</button>

    </form>
  </div>

  <div id="section4" class="container-fluid section4">

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="index.js" charset="utf-8"></script>

  </script>

</body>

</html>

$(文档).ready(函数() {

$('body').scrollspy({ target: ".navbar", offset: 50 });

$("#myNavbar a").on('click', function(event) {

if (this.hash !== "") {

  event.preventDefault();

  var hash = this.hash;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function() {

    window.location.hash = hash;
  });
}

}); });

Answer 1

您应该尝试将导航栏放在任何部分之外。

    <nav class="nav nav-masthead navbar-fixed-top" id="myNavbar">
           <a class="nav-link " href="#section1">Home</a>
          <a class="nav-link" href="#section2">Skillz</a>
          <a class="nav-link" href="#section3">Contact</a>
          <a class="nav-link dropdown dropdown-toggle" data-toggle="dropdown" 
href="#">Projects</a>
</nav>

    <div id="section1" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        ...
    </div>

为了确保它可以从任何部分单击并可见，您可以通过将 z-index 设置为页面的最高位置来更改它。

我的导航栏不允许我向上滚动

问题描述

1 个解决方案

解决方案1
0 2020-07-27 15:54:49

我的导航栏不允许我向上滚动

问题描述

1 个解决方案

解决方案1 0 2020-07-27 15:54:49

解决方案1
0 2020-07-27 15:54:49