0
私は、基本的なスクロールnavをブートストラップのScrollSpyプラグインを使用して動作させることに取り組んでいます。 自分のデータスパイとデータターゲットの設定が自分の身体にありますが、スクロールするときにアクティブなリンクスタイリングが適用されていません。ここで問題仕事にScrollSpyを取得する
は、事前に http://codepen.io/drustin/pen/QdmKdN
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- This is the scrollable area -->
<body data-spy="scroll" data-target=".navbar">
<!-- The navbar where the anchors <a> are used ot jump to a section in the scrollable container -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- These are the links placed in the nav across the top -->
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
</ul>
</div>
</div>
</nav>
<div>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>This is some text....try out the nav bar scroll, hopefully it works</p>
<p>This is some text....try out the nav bar scroll, hopefully it works</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>This is some text....try out the nav bar scroll, hopefully it works</p>
<p>This is some text....try out the nav bar scroll, hopefully it works</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>This is some text....try out the nav bar scroll, hopefully it works</p>
<p>This is some text....try out the nav bar scroll, hopefully it works</p>
</div>
</div>
</body>おかげで（ブートストラップのCSSやJSファイルはここにリンクされている）私の現在のコードへのリンクです！
を作ります！ – Chloe