Scrollspy

ავტომატურად განაახლეთ Bootstrap ნავიგაცია ან ჩამოთვალეთ ჯგუფის კომპონენტები გადახვევის პოზიციის მიხედვით, რათა მიუთითოთ რომელი ბმული არის ამჟამად აქტიური ხედვის პორტში.

Როგორ მუშაობს

Scrollspy-ს აქვს რამდენიმე მოთხოვნა გამართულად ფუნქციონირებისთვის:

თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .
ის უნდა იყოს გამოყენებული Bootstrap nav კომპონენტის ან სიის ჯგუფში .
Scrollspy მოითხოვს position: relative;ელემენტს, რომელსაც თქვენ ჯაშუშობთ, ჩვეულებრივ <body>.
როდესაც თვალთვალის სხვა ელემენტებს <body>, დარწმუნდით, რომ აქვს heightკომპლექტი და overflow-y: scroll;გამოიყენება.
წამყვანები ( <a>) საჭიროა და უნდა მიუთითებდეს ამ ელემენტზე id.

წარმატებით განხორციელების შემთხვევაში, თქვენი ნავიგაცია ან სიის ჯგუფი შესაბამისად განახლდება და .activeკლასი გადაინაცვლებს ერთი ელემენტიდან მეორეზე მათი ასოცირებული მიზნების მიხედვით.

გადაახვიეთ ნავიგაციის ზოლის ქვემოთ და უყურეთ აქტიური კლასის ცვლილებას. ასევე მონიშნული იქნება ჩამოსაშლელი ელემენტები.

@ fat

ჩანაცვლების კონტენტი scrollspy მაგალითისთვის. თქვენ გაქვთ საუკეთესო არქიტექტურა. პასპორტის შტამპები, ის კოსმოპოლიტია. კარგი, ახალი, სასტიკი, ჩვენ ის ჩაკეტილი გვაქვს. არასდროს დამიგეგმავს, რომ ერთ დღეს დავკარგავდი. ის შენს გულს ჭამს. შენი კოცნა კოსმოსურია, ყოველი ნაბიჯი ჯადოსნური. ვგულისხმობ მათ, ვგულისხმობ თითქოს ის არის. სალამი საყვარელო მოდი ვიმოგზაუროთ. უბრალოდ გაატარეთ ღამე, როგორც 4 ივლისს! მაგრამ გირჩევნია დაიკარგო.

@mdo

ჩანაცვლების კონტენტი scrollspy მაგალითისთვის. რადგან ის მუზა და მხატვარია. (ჩვენ ასე ვაკეთებთ) ასე რომ, თქვენ გინდათ თამაში მაგიით. ასე რომ, დარწმუნდით, სანამ ყველაფერს მომცემთ. ვსეირნობ, დავდივარ ჰაერზე (ამაღამ). გამოტოვეთ საუბარი, მოისმინეთ ეს ყველაფერი, გასეირნების დროა.

ერთი

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 მაგალითისთვის. თუ გინდა ცეკვა, თუ გინდა ეს ყველაფერი, იცოდე, რომ მე ვარ ის გოგო, რომელსაც უნდა დაუძახო. მე ვივლიდი ქარიშხალს. ასე რომ, ნება მომეცით მოგცეთ დაბადების დღის კოსტიუმი. ვინც გაიქცა. გასულ პარასკევს ღამით, დიახ, ვფიქრობ, რომ ჩვენ დავარღვიეთ კანონი, ყოველთვის თქვით, რომ შევწყვეტთ. იმიტომ, რომ ის ცოტათი იოკოსა და ცოტათი ოჰ არა. მინდა ყბის ჩამოწოლა, თვალის ამოვარდნა, თავის მობრუნება, სხეულის შოკი. ჰო, საკრედიტო ბარათები გავზარდეთ და ბარიდან გამოგვაგდეს.

და კიდევ რამდენიმე ჩანაცვლების შინაარსი, კარგი საზომისთვის.

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

მაგალითი წყობილი ნავით

Scrollspy ასევე მუშაობს წყობილ .navს-ებთან. თუ ბუდეა .nav, .activeმისი მშობლებიც იქნებიან .active. გადაახვიეთ ნავიბარის გვერდით მდებარე ტერიტორია და უყურეთ აქტიური კლასის ცვლილებას.

პუნქტი 1

ჩანაცვლების კონტენტი scrollspy მაგალითისთვის. ეს ეხება 1-ლ პუნქტს. მიგიყვანს მილები მაღლა, ასე მაღლა, რადგან მას აქვს ეს ერთი საერთაშორისო ღიმილი. ჩემს საწოლში უცხო ადამიანი ზის, თავში ფეთქვა. Ო არა. სხვა ცხოვრებაში გაიძულებდი დარჩე. იმიტომ, რომ მე, მე ყველაფერი შემიძლია. ვარგისი ჩემი გვირგვინის ბრძოლისთვის. გამოიყენება მშობლების სასმელის მოსაპარად და სახურავზე ასასვლელად. ტონალური, რუჯის მორგება და მზადაა, აწიეთ ის, რომ დამძიმდეს. მისი სიყვარული ნარკოტიკს ჰგავს. ვფიქრობ, დამავიწყდა, რომ არჩევანი მქონდა.

პუნქტი 1-1

ჩანაცვლების კონტენტი scrollspy მაგალითისთვის. ეს ეხება 1-1 პუნქტს. თქვენ გაქვთ საუკეთესო არქიტექტურა. პასპორტის შტამპები, ის კოსმოპოლიტია. კარგი, ახალი, სასტიკი, ჩვენ ის ჩაკეტილი გვაქვს. არასდროს დამიგეგმავს, რომ ერთ დღეს დავკარგავდი. ის შენს გულს ჭამს. შენი კოცნა კოსმოსურია, ყოველი ნაბიჯი ჯადოსნური. ვგულისხმობ მათ, ვგულისხმობ თითქოს ის არის. სალამი საყვარელო მოდი ვიმოგზაუროთ. უბრალოდ გაატარეთ ღამე, როგორც 4 ივლისს! მაგრამ გირჩევნია დაიკარგო.

პუნქტი 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 მაგალითისთვის. ეს ეხება 3-2 პუნქტს. ორიგინალი ხარ, მისი გამოცვლა შეუძლებელია. მთელი ღამე უკრავენ, შენს სიმღერას. კალიფორნიელი გოგოები ჩვენ უდაო ვართ. როგორც ჩიტი გალიის გარეშე. ახლა შიში არ არის, გაუშვი და იყავი თავისუფალი, მე შენ მიყვარხარ უპირობოდ. კედელზე ნაწერს ვხედავ. თქვენ შეგეძლოთ იმოგზაუროთ მსოფლიოში, მაგრამ არაფერი უახლოვდება ოქროს სანაპიროს.

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

მაგალითი სია-ჯგუფით

Scrollspy ასევე მუშაობს .list-groupს. გადაახვიეთ სიის ჯგუფის გვერდით მდებარე არე და უყურეთ აქტიური კლასის ცვლილებას.

პუნქტი 1 პუნქტი 2 პუნქტი 3 პუნქტი 4

პუნქტი 1

ჩანაცვლების კონტენტი scrollspy list-ჯგუფის მაგალითისთვის. ეს ეხება 1-ლ პუნქტს. არ გჭირდებათ ბოდიშის მოხდა. ახლა შიში არ არის, გაუშვი და იყავი თავისუფალი, მე შენ მიყვარხარ უპირობოდ. გასულ პარასკევს ღამით. ნუ იქნები მორცხვი ბიჭი, დადებ, რომ ლამაზია. ზაფხული საშუალო სკოლის შემდეგ, როცა პირველად შევხვდით. რადგან ის მუზა და მხატვარია. Რა? მოიცადე. მეგონა გამონაკლისი ვიყავი.

პუნქტი 2

ჩანაცვლების კონტენტი scrollspy list-ჯგუფის მაგალითისთვის. ეს ეხება მე-2 პუნქტს. დიახ, ის ცეკვავს საკუთარ დარტყმაზე. Ო არა. შენ შეგეძლო ყოფილიყავი საუკეთესო. რადგან, პატარავ, შენ ფეიერვერკი ხარ. შესაძლოა მიზეზი იმისა, რომ ყველა კარი დაკეტილია. გახსენი შენი გული და უბრალოდ დაე, დაიწყოს. ძალიან ელეგანტური, ჰო, ის კლასიკაა.

პუნქტი 3

ჩანაცვლების კონტენტი scrollspy list-ჯგუფის მაგალითისთვის. ეს ეხება მე-3 პუნქტს. ჩვენ მივდივართ უფრო და უფრო მაღლა. არასოდეს ერთი მეორის გარეშე, ჩვენ დავდექით შეთანხმება. ჰაერზე დავდივარ. ვიღაცამ თქვა, რომ ტატუ მოიხსნა. ახლა პეპელასავით ვცურავ. ტონალური, რუჯის მორგება და მზადაა, აწიეთ ის, რომ დამძიმდეს. იმიტომ, რომ ერთხელ ჩემი ხარ, ერთხელ ჩემი. თქვენ უბრალოდ უნდა აანთოთ შუქი და მიეცით საშუალება ანათებდეს! ასე რომ, ბულვარში შევედით. ოდესმე გიგრძვნიათ, რომ ქაღალდის წვრილად იგრძნოთ თავი. ყველაფერს ვხედავ, ახლა ვხედავ.

პუნქტი 4

ჩანაცვლების კონტენტი scrollspy list-ჯგუფის მაგალითისთვის. ეს ეხება მე-4 პუნქტს. ზაფხული საშუალო სკოლის შემდეგ, როცა პირველად შევხვდით. ახლა შიში არ არის, გაუშვი და იყავი თავისუფალი, მე შენ მიყვარხარ უპირობოდ. მზისგან დამსხვრეული კანი ისე ცხელა, რომ თქვენს პოპსიკულს გავადნობთ. ეს სიყვარული ლევიტაციას გაიძულებს.

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

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, დაამატეთ data-spy="scroll"ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ყველაზე ხშირად ეს იქნება <body>). შემდეგ დაამატეთ data-targetატრიბუტი ნებისმიერი Bootstrap .navკომპონენტის მშობელი ელემენტის ID-ით ან კლასით.

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-ის საშუალებით

CSS-ის დამატების position: relative;შემდეგ, დარეკეთ scrollspy-ს JavaScript-ით:

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

საჭიროა მოგვარებადი ID სამიზნეები

Navbar-ის ბმულებს უნდა ჰქონდეთ ამოსაცნობი ID სამიზნეები. მაგალითად, <a href="#home">home</a>უნდა შეესაბამებოდეს რაღაც DOM-ში, როგორიცაა <div id="home"></div>.

არამიზნობრივი `:visible`ელემენტები იგნორირებულია

სამიზნე ელემენტები, რომლებიც არ :visibleშეესაბამება jQuery-ს, იგნორირებული იქნება და მათი შესაბამისი ნავი ელემენტები არასოდეს იქნება ხაზგასმული.

მეთოდები

`.scrollspy('refresh')`

როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:

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

`.scrollspy('dispose')`

ანადგურებს ელემენტის scrollspy-ს.

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset="".

სახელი	ტიპი	ნაგულისხმევი	აღწერა
ოფსეტური	ნომერი	10	გადახვევის პოზიციის გამოთვლისას ზემოდან გადასატანი პიქსელები.
მეთოდი	სიმებიანი	ავტო	აღმოაჩენს, რომელ განყოფილებაშია დაკვირვებული ელემენტი. `auto`შეარჩევს საუკეთესო მეთოდს გადახვევის კოორდინატების მისაღებად. `offset`გამოიყენებს jQuery offset მეთოდს გადახვევის კოორდინატების მისაღებად. `position`გამოიყენებს jQuery პოზიციის მეთოდს გადახვევის კოორდინატების მისაღებად.
სამიზნე	სიმებიანი \| jQuery ობიექტი \| DOM ელემენტი		განსაზღვრავს ელემენტს Scrollspy დანამატის გამოსაყენებლად.

Ივენთი

ღონისძიების ტიპი	აღწერა
activate.bs.scrollspy	ეს მოვლენა ირთვება გადახვევის ელემენტზე, როდესაც ახალი ელემენტი გააქტიურდება scrollspy-ით.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Როგორ მუშაობს

მაგალითი ნავიბარში

@ fat

@mdo

ერთი

two

three

მაგალითი წყობილი ნავით

პუნქტი 1

პუნქტი 1-1

პუნქტი 1-2

Item 2

Item 3

Item 3-1

Item 3-2

მაგალითი სია-ჯგუფით

პუნქტი 1

პუნქტი 2

პუნქტი 3

პუნქტი 4

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

JavaScript-ის საშუალებით

საჭიროა მოგვარებადი ID სამიზნეები

არამიზნობრივი :visibleელემენტები იგნორირებულია

მეთოდები

.scrollspy('refresh')

.scrollspy('dispose')

Პარამეტრები

Ივენთი

არამიზნობრივი `:visible`ელემენტები იგნორირებულია

`.scrollspy('refresh')`

`.scrollspy('dispose')`