Tôi có một trang web với thanh điều hướng được cố định ở trên và 3 dấu chia bên dưới trong vùng nội dung chính.
Tôi đang cố gắng sử dụng scrollspy từ khung khởi động.
Tôi đã làm nổi bật thành công các tiêu đề khác nhau trong menu khi bạn cuộn qua các div.
Tôi cũng có nó để khi bạn nhấp vào menu, nó sẽ cuộn đến phần chính xác của trang. Tuy nhiên, độ lệch không chính xác (Nó không tính đến thanh điều hướng, vì vậy tôi cần bù khoảng 40 pixel)
Tôi thấy trên trang Bootstrap có đề cập đến một tùy chọn bù trừ nhưng tôi không chắc cách sử dụng nó.
Tôi cũng không hiểu nó có nghĩa là gì khi nó nói rằng bạn có thể sử dụng scrollspy với $('#navbar').scrollspy(), tôi không chắc nên đưa nó vào đâu nên tôi đã không làm như vậy và mọi thứ dường như đang hoạt động (ngoại trừ phần bù đắp).
Tôi nghĩ phần bù đắp có thể là data-offset='10'trên body tag, nhưng nó không làm được gì cho tôi.
Tôi có cảm giác rằng đây là một điều gì đó thực sự hiển nhiên và tôi chỉ thiếu nó. Bất kỳ giúp đỡ?
Mã của tôi là
...
<!-- 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>