0
Итак, я попытался использовать Data-spy для изменения активного якоря во время прокрутки; но если вы заметите, как только вы прокрутите страницу вниз до раздела и прокрутите страницу вверху страницы, якорь «Home» не будет повторно активирован. Как я могу исправить?Data-spy не переосмысливает якорь «Home» при прокрутке вверху страницы
Я удалил «активный» класс из «домашней» ссылки и попытался возиться с идентификаторами, но не повезло. Буду признателен за любую оказанную помощь.
http://jsfiddle.net/xXDarksnakeXx/409tfas4/
<head>
<title>The James Baldwin School</title>
<link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="Main.css" rel="stylesheet" type="text/css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="0">
<header>
<div class="navbar-wrapper">
<div class="container">
<div id="navtop" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">The James Baldwin School</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faculty">Faculty</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--- /.navbar-collapse collapse --->
</div><!--- /#navtop --->
</div><!-- /.container -->
</div><!-- /.navbar wrapper -->
</header>
<a href="http://en.wikipedia.org/wiki/James_Baldwin" target="_blank"><img src="http://i.huffpost.com/gen/1757925/thumbs/o-JAMES-BALDWIN-facebook.jpg" style="width:100%"></a>
<div class="image-caption">
</div>
<div class="jumbotron" id="about">
<div class="container">
<div class="text-center">
<h1>The James Baldwin School</h1>
<h2>A School For Expeditionary Learning.</h2>
<p>It is our mission to provide a philosophical and practical education for all students, an education that features creativity and inquiry, encourages habitual reading and productivity, as well as self-reflection and original thought. We agree with Socrates that the “unexamined life is not worth living,” and it is our desire to prepare students to live thoughtful and meaningful lives. We are committed to inspiring the love of learning in our students.</p>
<p>It is our mission, as well, at the James Baldwin School, to provide a haven for students who have previously experienced school as unresponsive to their needs as individuals. We wish for all students to find their voice and to speak knowledgeably and thoughtfully on issues that concern their school, their world. We aid students in this endeavor by personalizing our learning situations, by democratizing and humanizing the school environment, and by creating a “talking culture,” an atmosphere of informal intellectual discourse among students and faculty.</p>
<p>Democratizing the school would be impossible without our Core Values. Our core values help students aquire the important skills needed to continue their journey through life. Most importantly, our core values maintain safety and democracy for students and faculty.</p>
<a class="btn btn-large btn-danger" href="#">Learn more about Core Values</a>
</div>
</div>
</div>
<div class="container marketing" id="faculty">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details</a></p>
</div>
</div><!-- /.row -->
<div id="team-btn">
<div class="text-center">
<a class="btn btn-large btn-danger" href="#">See the rest of Our Team</a>
</div><!--- /.text-center --->
</div><!--- /.team-btn --->
</div><!-- /.container marketing -->
<hr>
<div class="container">
<footer class="text-center" id="footer">
<p>This site was created by Isaac Perez.<a href="#"> Back to top.</a></p>
<p>Copyright 2014 © The James Baldwin School. <br>Some Rights Reserved</p>
</footer>
</div><!-- /.container -->
<script src="Framework/js/jquery-2.1.3.min.js"></script>
<script src="Framework/js/bootstrap.js"></script>
<script src="Contact-Form/contact_form.js"></script>
</body>
Это потрясающе. Вы знаете, почему он работает таким образом? Ох .. и спасибо вам, кстати – xXDarksnakeXx
Привет! Поскольку data-шпион boostrap строго зависит от якорей, используя javascript. Поэтому вам нужно добавить привязку в определенную позицию, чтобы позволить шпиону данных знать, где именно находится позиция при прокрутке. – joydesigner