Я не могу заставить шпиона прокрутки правильно работать с вертикальной навигацией. Ниже вы можете найти код, который я использую. По какой-то причине активируется только "Два".
Кто-нибудь имеет представление о том, что не так?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Scroll Spy Playground</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span3">
<ul class="navbar nav nav-list affix">
<li class="active"><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
</div>
<div class="span1" data-spy="scroll">
<section id="one">
<h1>One</h1>
<h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2>
</section>
<section id="two">
<h1>Two</h1>
<h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2>
</section>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
Разбирая это для себя, я обнаружил, что для отслеживания элемента требуется полоса прокрутки.
Взгляните на этот скрипт: http://jsfiddle.net/adamp/qgU6h/1/
Вы можете либо шпионить непосредственно на элемент body ($('body').scrollspy()), либо дать вашему контенту явную высоту и заставить его отображать полосу прокрутки.
(Если вы посмотрите на пример документации Bootstrap , это делает трюк с фиксированной высотой.)
вы можете сделать это как http://jsfiddle.net/mCxqY/
<body data-spy="scroll" data-target="#navbar">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
<div id="navbar">
<ul class="nav">
<li><a href="#post1">Post 1</a></li>
<li><a href="#post2">Post 2</a></li>
<li><a href="#post3">Post 3</a></li>
</ul>
</div>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
</body>
CSS
@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css);
.box{
margin: 20px; padding: 15px;
background: #eee;
height: 500px;
}
#navbar{
position: fixed;
bottom: 0; left: 20px;
width: 100%;
background: #fff;
}
.nav li a{
float: left;
width: 80px;
padding: 15px 0;
}
.nav li a:hover{
color: #f33 !important;
background: none;
}
.nav li.active a{
color: #f55;
text-decoration: underline;
}
Спасибо Jerreck Я смог сделать мои работы с помощью
height: 100%;
в селекторе body моего CSS
Также, как рекомендовано ребятами в Bootstrap http://getbootstrap.com/javascript/#scrollspy
Я добавил position: relative; в тело тоже.
Начало селектора body в моем CSS выглядит следующим образом:
body {
position: relative;
height: 100%;
/* … */
}
В <body> в HTML мне пришлось удалить
data-offset="0"
так что теперь это выглядит как
<body data-spy="scroll" data-target="#navigation">
Мне пришлось сделать две вещи, чтобы заставить scrollspy работать для меня.
Во-первых, я должен был дать высоту элементу <body>:
<style>
.body
{
height: 100%;
}
</style>
<body data-spy="scroll" data-target="#scrollElement" data-offset="0">
Я думаю, это связано с тем, что scroll-spy пытается получить высоту элемента, на который вы следите, но если для вашего элемента не указана высота, он получает значение null (или 0?), значение, которое, по-видимому, нарушает вычисления script.
Во-вторых, я должен был убедиться, что между моими идентификационными элементами (что якорь навигации указывает на) есть достаточно вертикального пространства.
Я не мог определить точное количество места (оно зависело от атрибута смещения данных, поэтому он, вероятно, имеет к этому какое-то отношение), но я считаю, что если у вас есть высота, установленная для вашего spy element и scrollspy все еще не работают - просто добавьте больше контента между вашими идентификационными элементами.
После нескольких часов разочарований и исследований я пришел к выводу, что многие люди также не довольны документацией Bootstrap Affix (www.mtjhax.wordpress.com). В конце концов, это решение Кэрол Скелли работало для меня: http://bootply.com/63937
Скажите, что у вашей навигации был идентификатор "navbar", тело должно выглядеть так:
<body data-spy="scroll" data-target="#navbar">
...
</body>
И сама панель навигации должна быть следующей:
<div class="navbar" id="navbar">
<ul class="nav navbar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Затем вы инициализировали плагин...
$('#nav').affix({
offset: {top: 0}
});
... и дайте правильному стилю навигации:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Я сделал это так. для цели данных я использую имя класса .navbar
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top" >