У мене є сайт з фіксованим наверхом на верхній панелі та 3 дівами внизу в основній області вмісту.
Я намагаюся використовувати scrollspy з рамок завантаження.
У мене це вдало підкреслює різні заголовки в меню, коли ви прокручуєте повз діви.
У мене також є, тому коли ви натискаєте меню, воно прокручується до потрібної частини сторінки. Однак зсув є неправильним (це не враховує навібар, тому мені потрібно компенсувати приблизно 40 пікселів)
Я бачу на сторінці Bootstrap, вона згадує варіант зміщення, але я не впевнений, як ним користуватися.
Я також не значу $('#navbar').scrollspy()
, що це означає, що ви можете використовувати скролінг-шпіон , я не знаю, куди його включити, щоб я цього не зробив, і все, здається, працює (крім компенсації).
Я думав, що зсув може бути data-offset='10'
тегом body, але це нічого не робить для мене.
У мене є відчуття, що це щось дійсно очевидне, і я просто його пропускаю. Будь-яка допомога?
Мій код є
...
<!-- note: the data-offset doesn't do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">VIPS</a>
<ul class="nav">
<li class="active">
<a href="#trafficContainer">Traffic</a>
</li>
<li class="">
<a href="#responseContainer">Response Times</a>
</li>
<li class="">
<a href="#cpuContainer">CPU</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div id="trafficContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="responseContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="cpuContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
</div>
...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>