Question

我遇到了问题，我不确定是否已解决。我有一个启用了scrollspy的bootstrap 4导航栏，以便在滚动页面的不同部分时导航栏会更新。

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

我的网站：https://codepen.io/tidus198/pen/deWpvX 3

问题是导航栏滚动。默认情况下，该页面不会激活我的第一个导航项。首次访问该页面时，或者您一直滚动到页面顶部时，关于导航项不会突出显示。如果向下滚动一点，关于链接将在导航栏中变为活动状态。发生这种情况是因为我修改了导航栏，因此它随页面一起滚动。如何使其工作，以便默认情况下第一个导航项处于活动状态？
如果您点击其中一个导航项，它会滚过该部分的标题（即显示内容而不是标题）。我通过使用jquery偏移函数（获取最高值并将其减去设定量）来修复此问题，以显示实际标题而不是立即显示内容。现在，当您点击例如联系人时，它实际上会滚动到联系人文本。但问题是如果您单击“联系人”，导航栏会将“投资组合”显示为活动项目。我该如何解决这个问题？偏移量有效但打破了导航项目。

任何帮助都将不胜感激。

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>

CSS：

blockquote {
  border-left: none;
}

#body {
    background-color: #464646;
    padding-top: 65px; 
    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);
  } 

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

JS：

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

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

});

Answer 1

一些细微的调整，它看起来对我来说。请看我的叉子：https://codepen.io/mdlanglais/pen/OZmWNV

<强> HTML

public class loginFragment extends Fragment {

//Local Vars
private boolean loginCheck = false;

//required constructor
public loginFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_login, container, false);

    Button button = (Button) view.findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            login(v);
        }
    });

    // Inflate the layout for this fragment
    return view;

}

public boolean isLoggedIn() {
    return loginCheck;
}



private void login(View v){
    Toast.makeText(getActivity(),"Clicked",Toast.LENGTH_LONG).show();


    String username;
    String password;

    username = v.findViewById(R.id.enteredUsername).toString();
    password = v.findViewById(R.id.enteredPassword).toString();

    final ArrayList<String> info = new ArrayList<>();

    String[] unameSeparated = new String[username.length()];
    unameSeparated = username.split("(?!^)");

    String startUrl = "https://us.api.battle.net/d3/profile/";
    String uname = "";
    String APIKey = "/?locale=en_US&apikey=6nguxckrzchn86q9792jvdhww4uxf32v";

    //Separating the username into the parts needed for sending request
    for (int i = 0; i < unameSeparated.length; i++) {
        if ((unameSeparated[i].equals("#"))) {
            //Replacing # with '%23'
            uname += "%23";
        } else {
            uname += unameSeparated[i];
        }
    }

    String url = startUrl + uname+ APIKey;

    // Instantiate the RequestQueue.
    RequestQueue queue = Volley.newRequestQueue(getActivity());

    // Request a string response from the provided URL.
    StringRequest stringRequest = new StringRequest(Request.Method.GET, url,
            new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {
                    info.add(response);
                    Toast.makeText(getActivity(),"Request Success",Toast.LENGTH_LONG).show();
                }
            }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
            Toast.makeText(getActivity(),"Request FAIL",Toast.LENGTH_LONG).show();

        }
    });

    // Add the request to the RequestQueue.
    queue.add(stringRequest);
}

}

<强> CSS

<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>

<强> JS

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); }); });开始，从js中的.active移除-80，从.top元素中移除padding-top并添加{c}中body元素的padding-top。它可能可以通过相同想法的变化来完成。

Bootstrap 4导航栏第一个导航项未突出显示且滚动问题

1 个答案: