메인 콘텐츠 영역에 navbar가 상단에 고정되고 아래에 3div가있는 사이트가 있습니다.
부트 스트랩 프레임 워크에서 scrollspy를 사용하려고합니다.
div를지나 스크롤 할 때 메뉴에서 다른 제목을 성공적으로 강조 표시했습니다.
또한 메뉴를 클릭하면 페이지의 올바른 부분으로 스크롤됩니다. 그러나 오프셋이 잘못되었습니다 (탐색 막대를 고려하지 않았으므로 약 40 픽셀만큼 오프셋해야 함)
난에 표시되는 부트 스트랩 페이지 는 오프셋 옵션을 언급하지만 난 확실히 그것을 사용하는 방법을 모르겠어요.
나는 또한 scrollspy와 함께 사용할 수 있다고 말했을 때 의미하는 바가 $('#navbar').scrollspy()아니며 포함해야 할 위치가 확실하지 않아 모든 것이 작동하는 것 같습니다 (오프셋 제외).
오프셋이 data-offset='10'본문 태그에 있을 수 있다고 생각 했지만 아무런 효과가 없습니다.
나는 이것이 정말로 명백한 것 같은 느낌이 들었고 나는 그것을 놓치고 있습니다. 도움이 필요하세요?
내 코드는
...
<!-- 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>
div에 상대적인 포지션을 제공하는 이유는 무엇입니까? 아마도 이것이 원인 일 것입니다. 코드를 사용하여 jsfiddle을 생성하여 실제 작업을 볼 수 있습니까?
—
periklis