Nasıl Önyükleme uzaklığı ScrollSpy ayarlarım?

SORU

15 ŞUBAT 2012, ÇARŞAMBA

Nasıl Önyükleme uzaklığı ScrollSpy ayarlarım?

Gezinti çubuğu üstünde sabit ve ana içerik alanı altında 3 divs ile bir site var.

Bootstrap çerçeve scrollspy kullanmaya çalışıyorum.

Divs kaydırma yaptığınızda bunu başarıyla menüsünde Farklı başlıklar vurgulama var.

Ben de senin menüsüne tıklayın, sayfanın doğru parçası ilerleyin. Ancakuzaklık yanlıştır(40 piksel ofset ihtiyacım var dikkate gezinti çubuğu alarak değil)

Ofset bir seçenek söz Bootstrap page üzerinde görüyorum ama nasıl emin değilim.

Ben de ne demek ne diyor kullanabilirsiniz scrollspy ile $('#navbar').scrollspy(), emin değilim nerede bulunur öyle yapmadım ve her şey çalışıyor gibi görünüyor (hariç uzaklık).

Uzaklık gövde etiketi üzerinde data-offset='10' olabilir, ama benim için hiçbir şey yapmaz sanıyordum.

Bu da çok bariz bir duygu var ve ben bunu kaçırıyorum. Herhangi bir yardım?

Benim kodudur

...
<!-- 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>

CEVAP

5 AĞUSTOS 2012, Pazar

Bootstrap kullanır gidermek için sadece casusluk, kaydırma değil uzaklık. Bu uygun yere kaydırma sana bağlı olduğu anlamına gelir.

Bu deneyin, bu benim için çalışıyor: bir olay işleyicisi gezinti tıklama için ekleyin.

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

Burada buldum: https://github.com/twitter/bootstrap/issues/3316

Bunu Paylaş: