Javascript 引导4导航条第一个导航项未突出显示，scrollspy问题_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导4导航条第一个导航项未突出显示，scrollspy问题

javascript jquery html css twitter-bootstrap

Javascript 引导4导航条第一个导航项未突出显示，scrollspy问题,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我遇到了一个问题，我不确定是否能解决它。我有一个启用scrollspy的bootstrap 4导航栏，这样当您滚动页面的不同部分时，导航栏就会更新我还有一个jquery函数，它可以平滑滚动，这样当你点击导航链接时，页面不会立即跳转。我有两个问题我的网站：3 问题是导航条滚动。默认情况下，该页面不会激活我的第一个导航项目。当您第一次访问页面或一直滚动到页面顶部时，关于导航项目不会突出显示。如果向下滚动一点，导航栏中的“关于”链接将激活。发生这种情况是因为我修复了导航栏，使其与页面一起滚动。如何

我遇到了一个问题，我不确定是否能解决它。我有一个启用scrollspy的bootstrap 4导航栏，这样当您滚动页面的不同部分时，导航栏就会更新

我还有一个jquery函数，它可以平滑滚动，这样当你点击导航链接时，页面不会立即跳转。我有两个问题

我的网站：3

问题是导航条滚动。默认情况下，该页面不会激活我的第一个导航项目。当您第一次访问页面或一直滚动到页面顶部时，关于导航项目不会突出显示。如果向下滚动一点，导航栏中的“关于”链接将激活。发生这种情况是因为我修复了导航栏，使其与页面一起滚动。如何使其工作，以使第一个导航项在默认情况下处于活动状态

如果您单击其中一个导航项目，它将滚动到该部分的标题之前（即显示内容而不是标题）。我通过使用jquery offset函数（获取顶部值并将其减去一个设定值）立即显示实际标题而不是内容来解决这个问题。因此，现在，当您单击例如联系人时，它实际上会滚动到联系人文本。但问题是，如果您单击Contact，导航栏会将Portfolio显示为活动项。我该如何着手解决这个问题？偏移可以工作，但损坏了导航项

任何帮助都将不胜感激

HTML:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>My Portfolio</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <link rel="stylesheet" href="css/site.css" type="text/css" />    
    </head>

    <body id = "body">
    <header id="test">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" >
          <a class="navbar-brand" href="#"><img id="navpic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" ></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav nav-pills ml-auto" id="homenav">
                <li class="nav-item">
                  <a class="nav-link" href="#test">About <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#contact">Contact</a>
                </li>
              </ul>
          </div>
        </nav>


          <section class="container">

            <div class="jumbotron text-center">
              <div class="row">
                <div class="col-12 col-md-4">
                  <img id="mypic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" class="img-thumbnail">
                </div>
                <div class="col-12 col-md-8">
                  <h1 class="display-5">Your Name Here</h1>
                  <p class="lead">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and
                    creative direction; devoted to functional programming and information architecture.</p>
                  <hr class="my-4">
                  <p class="small">Web Developer - User Experience Designer - Graphic Artist</p>

                </div>

              </div>

            </div>
          </section>
        </header>

        <main>
          <section id="content-container" class="container">
            <div class="row" id="portfolio">
              <div class="col-12">
                <h2 class="display-5 text-center text-white text-uppercase mb-3">Portfolio</h2>
              </div>
            </div>

            <div class="row">

              <div class="col-lg-6 d-flex align-items-stretch mb-4">
                <div class="card w-100">
                  <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
                  <div class="card-footer text-center">
                    Image One
                  </div>
                </div>
              </div>

              <div class="col-lg-6 d-flex align-items-stretch mb-4">
                <div class="card w-100">
                  <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">

                  <div class="card-footer text-center">Image Two</div>
                </div>
              </div>

            </div>

            <div class="row">

              <div class="col-lg-6 d-flex align-items-stretch mb-4">
                <div class="card w-100">
                  <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
                  <div class="card-footer text-center">
                    Image Three
                  </div>
                </div>
              </div>

              <div class="col-lg-6 d-flex align-items-stretch mb-4">
                <div class="card w-100">
                  <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">

                  <div class="card-footer text-center">Image Four</div>
                </div>
              </div>

            </div>

            <div class="row">

              <div class="col-lg-6 d-flex align-items-stretch mb-4">
                <div class="card w-100">
                  <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
                  <div class="card-footer text-center">
                    Image Five
                  </div>
                </div>
              </div>

              <div class="col-lg-6 d-flex align-items-stretch mb-4">
                <div class="card w-100">
                  <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">

                  <div class="card-footer text-center">Image Six</div>
                </div>
              </div>

            </div>

          </section>
        </main>

        <footer>
          <section class="container">
            <div class="jumbotron mt-2">

              <div class="row">
                <div class="col-12">
                  <h2 class="display-4 text-center pb-2" id="contact">Contact Me</h2>
                </div>
              </div>

              <div class="row">
                <div class="col-12 col-md-8">
                  <form>
                    <div class="form-group">
                      <label for="name">Name</label>
                      <input type="text" class="form-control" id="name" placeholder="Name" required>
                    </div>
                    <div class="form-group">
                      <label for="emailaddr">Email</label>
                      <input type="email" class="form-control" id="emailaddr" placeholder="name@example.com" required>
                    </div>
                    <div class="form-group">
                      <label for="phone">Phone</label>
                      <input type="number" class="form-control" id="phone" placeholder="123-456-7890">
                    </div>
                    <div class="form-group">
                      <label for="textarea">Message</label>
                      <textarea class="form-control" id="textarea" rows="3"></textarea>
                    </div>
                  </form>

                </div>
                <div class="col-12 col-md-4">
                  <p class="lead">Feel free to contact me if you have any additional questions on my portfolio. You can either email me directly
                    at
                    <a href="mailto:myemail@myemail.com?subject=Porfolio Question">
                      myemail@myemail.com</a> or fill out the contact form.
                  </p>

                </div>

              </div>

            </div>

          </section>
        </footer>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></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="js/app.js" type="text/javascript"></script>

    </body>
</html>

JS:

一些小的调整，它看起来对我来说是正确的。请看我的叉子：

HTML

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Portfolio</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="css/site.css" type="text/css" />    
</head>

<body id = "body" data-spy="scroll" data-target="#navbarNav">
<header id="test">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" >
      <a class="navbar-brand" href="#"><img id="navpic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" ></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav nav-pills ml-auto" id="homenav">
            <li class="nav-item">
              <a class="nav-link active" href="#test">About <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
      </div>
    </nav>


      <section class="container">

        <div class="jumbotron text-center">
          <div class="row">
            <div class="col-12 col-md-4">
              <img id="mypic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" class="img-thumbnail">
            </div>
            <div class="col-12 col-md-8">
              <h1 class="display-5">Your Name Here</h1>
              <p class="lead">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and
                creative direction; devoted to functional programming and information architecture.</p>
              <hr class="my-4">
              <p class="small">Web Developer - User Experience Designer - Graphic Artist</p>

            </div>

          </div>

        </div>
      </section>
    </header>

    <main>
      <section id="content-container" class="container">
        <div class="row" id="portfolio">
          <div class="col-12">
            <h2 class="display-5 text-center text-white text-uppercase mb-3">Portfolio</h2>
          </div>
        </div>

        <div class="row">

          <div class="col-lg-6 d-flex align-items-stretch mb-4">
            <div class="card w-100">
              <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
              <div class="card-footer text-center">
                Image One
              </div>
            </div>
          </div>

          <div class="col-lg-6 d-flex align-items-stretch mb-4">
            <div class="card w-100">
              <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">

              <div class="card-footer text-center">Image Two</div>
            </div>
          </div>

        </div>

        <div class="row">

          <div class="col-lg-6 d-flex align-items-stretch mb-4">
            <div class="card w-100">
              <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
              <div class="card-footer text-center">
                Image Three
              </div>
            </div>
          </div>

          <div class="col-lg-6 d-flex align-items-stretch mb-4">
            <div class="card w-100">
              <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">

              <div class="card-footer text-center">Image Four</div>
            </div>
          </div>

        </div>

        <div class="row">

          <div class="col-lg-6 d-flex align-items-stretch mb-4">
            <div class="card w-100">
              <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
              <div class="card-footer text-center">
                Image Five
              </div>
            </div>
          </div>

          <div class="col-lg-6 d-flex align-items-stretch mb-4">
            <div class="card w-100">
              <img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">

              <div class="card-footer text-center">Image Six</div>
            </div>
          </div>

        </div>

      </section>
    </main>

    <footer>
      <section class="container">
        <div class="jumbotron mt-2">

          <div class="row">
            <div class="col-12">
              <h2 class="display-4 text-center pb-2" id="contact">Contact Me</h2>
            </div>
          </div>

          <div class="row">
            <div class="col-12 col-md-8">
              <form>
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" placeholder="Name" required>
                </div>
                <div class="form-group">
                  <label for="emailaddr">Email</label>
                  <input type="email" class="form-control" id="emailaddr" placeholder="name@example.com" required>
                </div>
                <div class="form-group">
                  <label for="phone">Phone</label>
                  <input type="number" class="form-control" id="phone" placeholder="123-456-7890">
                </div>
                <div class="form-group">
                  <label for="textarea">Message</label>
                  <textarea class="form-control" id="textarea" rows="3"></textarea>
                </div>
              </form>

            </div>
            <div class="col-12 col-md-4">
              <p class="lead">Feel free to contact me if you have any additional questions on my portfolio. You can either email me directly
                at
                <a href="mailto:myemail@myemail.com?subject=Porfolio Question">
                  myemail@myemail.com</a> or fill out the contact form.
              </p>

            </div>

          </div>

        </div>

      </section>
    </footer>

  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></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="js/app.js" type="text/javascript"></script>

</body>

blockquote {
  border-left: none;
}

#body {
    background-color: #464646;
    padding-top: 0px; 
    position: relative;
}

#mypic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

#navpic {
  width: 40px;
  height: 40px;

}

.jumbotron #contact {
  margin-top: -50px;
}

form label {
  font-weight: bold;
}

#homenav > li > a:hover{
    background-color:grey;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  }

#test {
  padding-top: 95px;
}

#about{
  position: relative;
  top: 1px;
}

$(document).ready(function (){
  $('body').scrollspy({ target: '.navbar' });

  $('.nav-link').on('click', function(){
    var clickedItem = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(clickedItem).offset().top
    }, 1500);
  });
});

基本上，我首先将About链接设置为

.active

，从js中的

.top

中删除-80，从

body

元素中删除

padding top

，并在css中的

test

元素中添加一些

padding top

。也许可以用相同想法的变体来完成

谢谢，我不知道是车身衬垫导致导航条第一个链接出现问题。移除车身衬垫实际上解决了第一个问题。至于从顶部删除-80，这确实解决了问题，但链接显示的是内容，而不是我滚动到的部分的标题。我想没有简单的方法来解决这个问题。.active类解决了什么问题？我看到导航条以任何方式工作，即使它不存在！我的思考过程首先是，锁定关于在页面加载时不活动的问题，因此我使用

.active.

强制它。在调整

正文

和

#test

元素上的填充后，它一定没有必要。在这一点上它没有任何作用。如果scrollspy功能继续出现问题，我可能会下一步尝试，在

$（'.nav link'）。在（'click'，function（）

等，清除所有按钮的颜色，并将活动类添加到刚刚单击的按钮。如果我理解，单击的按钮应该立即成为活动链接，而不仅仅是在滚动动画到达锚定元素时。明白了。我想这可能内置于scrollspy功能中，但不知道。我将尝试使用g打开控制台，注销click项的类，看看是否是这样。感谢所有的帮助

blockquote {
  border-left: none;
}

#body {
    background-color: #464646;
    padding-top: 0px; 
    position: relative;
}

#mypic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

#navpic {
  width: 40px;
  height: 40px;

}

.jumbotron #contact {
  margin-top: -50px;
}

form label {
  font-weight: bold;
}

#homenav > li > a:hover{
    background-color:grey;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  }

#test {
  padding-top: 95px;
}

#about{
  position: relative;
  top: 1px;
}

$(document).ready(function (){
  $('body').scrollspy({ target: '.navbar' });

  $('.nav-link').on('click', function(){
    var clickedItem = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(clickedItem).offset().top
    }, 1500);
  });
});