这是我在这里发表的第一篇文章，所以如果我做错了什么，请不要生我的气。
以下是这种情况：尝试在codepen上添加bootstrap 3 scrollspy功能到我的代码中，它基本上无法正常工作。从stackoverflow等尝试了不同的解决方案，没有任何帮助。
有没有可以查看我的代码的好人？
HTML：
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
CSS：
constructor在codepen设置标签中，我包括：
CSS： bootstrap.min.css
JS： jquery.min.js bootstrap.min.js
以下是我的codepen的链接：https://codepen.io/PatrykJamroz/full/RMZJva
答案 0 :(得分：1)
首先，你需要启动身体而不是div标签，这样你的身体才能有以下内容：
<body data-spy="scroll" data-target=".navbar" data-offset="0">
而不是：
<div data-spy="scroll" data-target="#nav" data-offset="0">
因为正文是滚动事件附加到的东西所以启动div不会有好处，除非你滚动该div。
接下来，您需要附加.navbar或nav本身是最佳做法。而且我也看到你正在使用jquery 3，这可能会导致bootstrap 3出现问题，所以你可能想切换到jquery 2。
答案 1 :(得分：0)
你可以试试whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});
答案 2 :(得分：0)
我认为你并没有真正理解bootstrap scrollspy实际上是如何运作的。你必须使'＆＃39;身体＆＃39;作为主要的scrollspy容器！看一看：
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
}).container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact </a></li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<a href="mailto:jamroz.patryk@gmail.com"><h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk@gmail.com</h4></a>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
以这种方式工作！祝你好运，再见。