in English

kaydırma casusu

Görünüm alanında hangi bağlantının etkin olduğunu belirtmek için, Önyükleme navigasyonunu otomatik olarak güncelleyin veya grup bileşenlerini kaydırma konumuna göre listeleyin.

Nasıl çalışır

Scrollspy'ın düzgün çalışması için birkaç gereksinimi vardır:

  • JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .
  • Bir Bootstrap gezinme bileşeninde veya liste grubunda kullanılmalıdır .
  • Scrollspy, position: relative;gözetlediğiniz öğeye ihtiyaç duyar, genellikle <body>.
  • dışındaki öğeler üzerinde casusluk yaparken , bir kümeye sahip olduğunuzdan ve uyguladığınızdan <body>emin olun .heightoverflow-y: scroll;
  • Çapalar ( <a>) gereklidir ve bununla birlikte bir öğeye işaret etmelidir id.

Başarılı bir şekilde uygulandığında, gezinme veya liste grubunuz buna göre güncellenecek ve .activesınıfı ilişkili hedeflerine göre bir öğeden diğerine taşıyacaktır.

Gezinme çubuğundaki örnek

Gezinme çubuğunun altındaki alanı kaydırın ve aktif sınıf değişimini izleyin. Açılan öğeler de vurgulanacaktır.

@yağ

Scrollspy örneği için yer tutucu içeriği. En iyi mimariye sahipsin. Pasaport pulları, o kozmopolit. Güzel, taze, şiddetli, kilitledik. Bir gün seni kaybedeceğimi asla planlamadım. Kalbini yiyor. Öpücüğün kozmik, her hareket sihir. Demek istediğim, sanki o varmış gibi. Selamlar sevdiklerim hadi bir yolculuğa çıkalım. Sadece 4 Temmuz gibi geceye sahip olun! Ama boşa gitmeyi tercih edersin.

@mdo

Scrollspy örneği için yer tutucu içeriği. Çünkü o ilham perisi ve sanatçı. (Biz böyle yaparız) Demek sihirle oynamak istiyorsun. Bu yüzden hepsini bana vermeden önce emin ol. Yürüyorum, havada yürüyorum (bu gece). Konuşmayı atla, hepsini duydum, yürüyüşe çıkma zamanı.

bir

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Scrollspy örneği için yer tutucu içeriği. Dans etmek istiyorsan, hepsini istiyorsan araman gereken kızın ben olduğumu biliyorsun. Yapacağım fırtınada yürüyün. O zaman doğum günü takımını giydirmeme izin ver. Kaçan. Geçen Cuma gecesi, evet, sanırım kanunu çiğnedik, her zaman duracağımızı söylüyoruz. Çünkü o biraz Yoko ve biraz da 'Oh hayır'. Çenenin düşmesini, gözlerinin açılmasını, başın dönmesini, vücudunu şok etmesini istiyorum. Evet, kredi kartlarımızı doldurduk ve bardan atıldık.

Ve iyi bir önlem için biraz daha yer tutucu içerik.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

İç içe gezinme ile örnek

Scrollspy ayrıca iç içe geçmiş .navs ile de çalışır. Bir yuvalanmış .navise .active, ebeveynleri de olacaktır .active. Gezinme çubuğunun yanındaki alanı kaydırın ve aktif sınıf değişimini izleyin.

Madde 1

Scrollspy örneği için yer tutucu içeriği. Bu 1. maddeyle ilgili. Sizi kilometrelerce yükseğe çıkarıyor, çünkü o uluslararası bir gülümsemeye sahip. Yatağımda bir yabancı var, kafamda bir zonklama var. Oh hayır. Başka bir hayatta kalmanı sağlardım. Çünkü ben, ben her şeyi yapabilirim. En büyük savaşım için hazırlanıyorum. Ailenin içkisini çalıp çatıya çıkmak için kullanılırdı. Ton, bronz formda ve hazır, açın, çünkü ağırlaşıyor. Onun aşkı uyuşturucu gibidir. Sanırım bir seçeneğim olduğunu unuttum.

Madde 1-1

Scrollspy örneği için yer tutucu içeriği. Bu madde 1-1 ile ilgilidir. En iyi mimariye sahipsin. Pasaport pulları, o kozmopolit. Güzel, taze, şiddetli, kilitledik. Bir gün seni kaybedeceğimi asla planlamadım. Kalbini yiyor. Öpücüğün kozmik, her hareket sihir. Demek istediğim, sanki o varmış gibi. Selamlar sevdiklerim hadi bir yolculuğa çıkalım. Sadece 4 Temmuz gibi geceye sahip olun! Ama boşa gitmeyi tercih edersin.

Öğe 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Scrollspy örneği için yer tutucu içeriği. Bu madde 3-2 ile ilgilidir. Sen orijinalsin, değiştirilemez. Bütün gece çalıyorlar, senin şarkın. Kaliforniyalı kızlar biz inkar edilemeziz. Kafesi olmayan bir kuş gibi. Artık korku yok, bırak ve özgür ol, seni koşulsuz seveceğim. Duvardaki yazıyı görebiliyorum. Dünyayı dolaşabilirsin ama hiçbir şey altın kıyıya yaklaşamaz.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Liste grubu ile örnek

Scrollspy ayrıca .list-groups ile de çalışır. Liste grubunun yanındaki alanı kaydırın ve aktif sınıf değişimini izleyin.

Madde 1

Scrollspy liste grubu örneği için yer tutucu içeriği. Bu 1. maddeyle ilgili. Özür dilemene gerek yok. Artık korku yok, bırak ve özgür ol, seni koşulsuz seveceğim. Geçen Cuma gecesi. Utangaç bir adam olma, bahse girerim güzeldir. Liseden sonra ilk tanıştığımız yaz. Çünkü o ilham perisi ve sanatçı. Ne? Beklemek. İstisna olduğumu düşündüm.

2. öğe

Scrollspy liste grubu örneği için yer tutucu içeriği. Bu 2. maddeyle ilgili. Evet, kendi ritmine göre dans ediyor. Oh hayır. En büyük olabilirdin. 'Bebeğim çünkü sen bir havai fişeksin. Belki de tüm kapıların kapalı olmasının bir nedeni. Kalbini aç ve başlamasına izin ver. Çok şık, evet, o bir klasik.

madde 3

Scrollspy liste grubu örneği için yer tutucu içeriği. Bu madde 3 ile ilgilidir. Gittikçe daha yükseğe çıkıyoruz. Biri olmadan diğeri asla, bir anlaşma yaptık. Havada yürüyorum. Birisi dövmeni sildirdiğini söyledi. Şu anda bir kelebek gibi süzülüyorum. Ton, bronz formda ve hazır, açın, çünkü ağırlaşıyor. Çünkü bir kere benimsin, bir kere benimsin. Sadece ışığı tutuşturmalı ve parlamasına izin vermelisin! Böylece bulvara ulaştık. Hiç hissettin mi, çok kağıt inceliği hissettin mi? Hepsini görüyorum, şimdi görüyorum.

4. madde

Scrollspy liste grubu örneği için yer tutucu içeriği. Bu 4. maddeyle ilgili. Liseden sonra ilk tanıştığımız yaz. Artık korku yok, bırak ve özgür ol, seni koşulsuz seveceğim. Güneşin öptüğü ten o kadar sıcak ki buzlu şekerinizi eriteceğiz. Bu aşk seni havaya uçuracak.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

kullanım

Veri öznitelikleri aracılığıyla

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-spy="scroll"için, gözetlemek istediğiniz öğeye ekleyin (çoğunlukla bu, <body>). Ardından , herhangi bir Bootstrap bileşeninin data-targetüst öğesinin kimliği veya sınıfıyla özniteliği ekleyin..nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript aracılığıyla

position: relative;CSS'nizi ekledikten sonra , JavaScript aracılığıyla scrollspy'ı arayın:

$('body').scrollspy({ target: '#navbar-example' })

Çözümlenebilir kimlik hedefleri gerekli

Gezinme çubuğu bağlantılarının çözümlenebilir kimlik hedefleri olmalıdır. Örneğin, a <a href="#home">home</a>, DOM'daki gibi bir şeye karşılık gelmelidir <div id="home"></div>.

Hedef dışı :visibleöğeler yoksayıldı

:visiblejQuery'ye uygun olmayan hedef öğeler yok sayılacak ve bunlara karşılık gelen gezinme öğeleri hiçbir zaman vurgulanmayacaktır.

yöntemler

.scrollspy('refresh')

DOM'a öğe ekleme veya çıkarma ile birlikte scrollspy kullanırken, yenileme yöntemini şu şekilde çağırmanız gerekir:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Bir öğenin kaydırma casusunu yok eder.

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-offset="".

İsim Tip Varsayılan Tanım
telafi etmek sayı 10 Kaydırma konumu hesaplanırken üstten kaydırılacak pikseller.
yöntem sicim Oto Gözetlenen öğenin hangi bölümde olduğunu bulur. autokaydırma koordinatlarını almak için en iyi yöntemi seçer. offsetkaydırma koordinatlarını almak için jQuery ofset yöntemini kullanır. positionkaydırma koordinatlarını almak için jQuery konum yöntemini kullanır.
hedef dize | jQuery nesnesi | DOM öğesi Scrollspy eklentisinin uygulanacağı öğeyi belirtir.

Olaylar

Etkinlik tipi Tanım
activ.bs.scrollspy Bu olay, scrollspy tarafından yeni bir öğe etkinleştirildiğinde kaydırma öğesinde tetiklenir. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})