סקראָלספּי
אויטאָמאַטיש דערהייַנטיקן Bootstrap נאַוויגאַציע אָדער רשימה גרופּע קאַמפּאָונאַנץ באזירט אויף מעגילע שטעלע צו אָנווייַזן וואָס לינק איז דערווייַל אַקטיוו אין די וויופּאָרט.
וויאזוי עס ארבעט
Scrollspy האט עטלעכע רעקווירעמענץ צו פונקציאָנירן רעכט:
- אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערז
util.js. - עס מוזן זיין געוויינט אויף אַ Bootstrap נאַוו קאָמפּאָנענט אָדער רשימה גרופּע .
- סקראָלספּי ריקווייערז
position: relative;די עלעמענט איר ספּייינג אויף, יוזשאַוואַלי די<body>. - ווען ספּייינג אויף אנדערע עלעמענטן ווי די
<body>, זיין זיכער צו האָבן אַheightגאַנג אוןoverflow-y: scroll;געווענדט. - אַנגקערז (
<a>) זענען פארלאנגט און מוזן פונט צו אַן עלעמענט מיט דעםid.
ווען הצלחה ימפּלאַמענאַד, דיין נאַוו אָדער רשימה גרופּע וועט דערהייַנטיקן אַקאָרדינגלי, מאָווינג די .activeקלאַס פון איין נומער צו דער ווייַטער באזירט אויף זייער פֿאַרבונדן טאַרגאַץ.
בייַשפּיל אין נאַוובאַר
מעגילע די געגנט אונטער די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן. די דראָפּדאָוון ייטאַמז וועט אויך זיין כיילייטיד.
@פעט
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי בייַשפּיל. איר האָט די פיינאַסט אַרקאַטעקטשער. פאספארט שטעמפּל, זי איז קאָסמאָפּאָליטיש. פייַן, פריש, צאָרנדיק, מיר גאַט עס אויף שלאָס. קיינמאָל פּלאַננעד אַז איין טאָג איך וואָלט פאַרלירן איר. זי עסט דיין האַרץ אויס. דיין קוש איז קאָסמיש, יעדער מאַך איז מאַגיש. איך מיין די אָנעס, איך מיינען ווי זי איז די איין. גרעעטינגס ליב געהאט אָנעס לאָמיר נעמען אַ נסיעה. נאָר פאַרמאָגן די נאַכט ווי די 4 יולי! אבער איר'ד אלא באַקומען ווייסטאַד.
@מדאָ
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי בייַשפּיל. ווייַל זי איז די מוסע און די קינסטלער. (דאָס איז ווי מיר טאָן) אַזוי איר ווילן צו שפּילן מיט מאַגיש. אַזוי נאָר זיין זיכער איידער איר געבן עס אַלע צו מיר. איך גיי, איך גיי אויף לופט (היינט נאכט). האָפּקען די רעדן, געהערט עס אַלע, צייט צו גיין די גיין.
איינער
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
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי בייַשפּיל. אויב איר ווילט טאַנצן, אויב איר ווילט אַלץ, איר וויסן אַז איך בין די מיידל וואָס איר זאָל רופן. גיין דורך די שטורעם איך וואָלט. אַזוי לאָזן מיר באַקומען איר אין דיין דיין געבורסטאָג פּאַסן. דער וואָס איז אַוועק. לעצטע פרייטאג נאַכט, יאָ, איך טראַכטן מיר האָבן צעבראכן די געזעץ, שטענדיק זאָגן אַז מיר וועלן האַלטן. ווייַל זי איז אַ ביסל פון יאָקאָ, און זי איז אַ קליין ביסל פון 'אָה ניט'. איך ווילן די קין פאַלן, אויג פּאָפּין, קאָפּ טורנינג, גוף שאַקינג. יאָ, מיר מאַקסיד אונדזער קרעדיט קאַרדס און זענען קיקט אויס פון די באַר.
און עטלעכע מער פּלאַסהאָלדער אינהאַלט, פֿאַר גוט מאָס.
<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>
בייַשפּיל מיט נעסטעד נאַוויגאַציע
סקראָלספּי אויך אַרבעט מיט נעסטעד .navס. אויב אַ נעסטעד .navאיז .active, זיין עלטערן וועלן אויך זיין .active. מעגילע די געגנט ווייַטער צו די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן.
נומער 1
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי בייַשפּיל. דאָס איז שייך צו פּונקט 1. נעמט איר מייל הויך, אַזוי הויך, ווייַל זי האט אַז איין אינטערנאַציאָנאַלע שמייכל. עס איז אַ פרעמדער אין מיין בעט, עס איז אַ קלאַפּ אין מיין קאָפּ. אוי ניין. אין אן אנדער לעבן איך וואָלט מאַכן איר בלייַבן. ווייַל איך, איך בין טויגעוודיק פון עפּעס. פּאַסיק פֿאַר מיין קרוין שלאַכט. פלעג ט גנבענע ן דײנ ע עלטער ן שטאר ק או ן קריכ ן אויפ ן דאך . טאָן, טאַן פּאַסיק און גרייט, קער עס אַרויף ווייַל עס ווערט שווער. איר ליבע איז ווי אַ מעדיצין. איך מיין אז איך האב פארגעסן אז איך האב געהאט א ברירה.
נומער 1-1
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי בייַשפּיל. דאָס איז שייך צו די נומער 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
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי בייַשפּיל. דאָס איז שייך צו נומער 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>
בייַשפּיל מיט רשימה-גרופּע
סקראָלספּי אויך אַרבעט מיט .list-groups. מעגילע די געגנט ווייַטער צו דער רשימה גרופּע און היטן די אַקטיוו קלאַס טוישן.
נומער 1
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי רשימה-גרופּע בייַשפּיל. דער איינער שייך צו נומער 1. טאָן ניט דאַרפֿן אַנטשולדיקן. עס איז איצט קיין מורא, לאָזן גיין און נאָר זיין פריי, איך וועל ליבע איר ומבאַדינגט. לעצטע פרייטאג נאַכט. דו זאלסט נישט זיין אַ שעמעוודיק מענטש איך וועט געוועט עס איז שיין. זומער נאָך הויך שולע ווען מיר ערשטער באגעגנט. ווייַל זי איז די מוסע און די קינסטלער. וואס? וואַרטן. געדאַנק אַז איך בין די ויסנעם.
נומער 2
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי רשימה-גרופּע בייַשפּיל. דאָס איז שייך צו פּונקט 2. יאָ, זי דאַנסט צו איר אייגענער קלאַפּ. אוי ניין. איר קען האָבן געווען דער גרעסטער. ווייַל, בעיבי, איר זענט אַ פיירווערק. אפשר א סיבה פארוואס אלע טירן זענען פארמאכט. עפענען דיין האַרץ און נאָר לאָזן עס אָנהייבן. אַזוי טרעס מאָדיש, יאָ, זי איז אַ קלאַסיש.
נומער 3
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי רשימה-גרופּע בייַשפּיל. דער איינער שייך צו נומער 3. מיר גיין העכער און העכער. קיינמאל נישט איינס אן דעם אנדערן, האבן מיר געמאכט א ברית. איך גיי אויף לופט. עמעצער האט געזאגט אַז איר האָט אַוועקגענומען דיין טאַטו. איצט שװעם איך װי אַ פלאַטערל. טאָן, טאַן פּאַסיק און גרייט, קער עס אַרויף ווייַל עס ווערט שווער. ווייַל אַמאָל איר זענט מייַן, אַמאָל איר זענט מייַן. איר נאָר מוזן אָנצינדן די ליכט און לאָזן עס שייַנען! אַזוי מיר שלאָגן די בולאַוואַרד. צי איר אלץ פילן, פילן אַזוי פּאַפּיר דין. איך זען עס אַלע, איך זען עס איצט.
נומער 4
אָרטהאָלדער אינהאַלט פֿאַר די סקראָלספּי רשימה-גרופּע בייַשפּיל. דאָס איז שייך צו נומער 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>
באַניץ
דורך דאַטן אַטריביוץ
צו לייכט לייגן סקראָלספּי נאַטור צו דיין טאַפּבאַר נאַוויגאַציע, לייגן data-spy="scroll"צו די עלעמענט איר ווילן צו שפּיאָן אויף (רובֿ טיפּיקלי דאָס וואָלט זיין די <body>). דערנאָך לייגן דעם data-targetאַטריביוט מיט די שייַן אָדער קלאַס פון די פאָטער עלעמענט פון קיין באָאָטסטראַפּ .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>
דורך דזשאַוואַסקריפּט
נאָך אַדינג position: relative;דיין CSS, רופן די סקראָלספּי דורך דזשאַוואַסקריפּט:
$('body').scrollspy({ target: '#navbar-example' })
ריזאַלווד שייַן טאַרגאַץ פארלאנגט
נאַוובאַר פֿאַרבינדונגען מוזן האָבן ריזאַלווד שייַן טאַרגאַץ. פֿאַר בייַשפּיל, אַ <a href="#home">home</a>מוזן שטימען צו עפּעס אין די DOM ווי <div id="home"></div>.
ניט- :visibleציל עלעמענטן איגנאָרירט
ציל עלעמענטן וואָס זענען נישט :visibleלויט jQuery וועט זיין איגנאָרירט און זייער קאָראַספּאַנדינג נאַוו ייטאַמז וועט קיינמאָל זיין כיילייטיד.
מעטהאָדס
.scrollspy('refresh')
ווען איר נוצן סקראָלספּי אין קאַנדזשאַנגקשאַן מיט אַדינג אָדער רימוווינג עלעמענטן פון די DOM, איר דאַרפֿן צו רופן דעם דערפרישן אופֿן ווי אַזוי:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
דיסטרויז אַן עלעמענט ס סקראָלספּי.
אָפּציעס
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-offset="".
| נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
|---|---|---|---|
| אָפסעט | נומער | 10 | פּיקסעלס צו פאָטאָ פון שפּיץ ווען קאַלקיאַלייטינג די שטעלע פון די מעגילע. |
| אופֿן | שטריקל | אַוטאָ | געפינט אין וואָס אָפּטיילונג די ספּייד עלעמענט איז, autoוועט קלייַבן דער בעסטער אופֿן צו באַקומען מעגילע קאָואָרדאַנאַץ. offsetוועט נוצן jQuery פאָטאָ מעטאָד צו באַקומען מעגילע קאָואָרדאַנאַץ. positionוועט נוצן jQuery שטעלע מעטאָד צו באַקומען מעגילע קאָואָרדאַנאַץ. |
| ציל | שטריקל | דזשקווערי כייפעץ | DOM עלעמענט | ספּעסיפיעס עלעמענט צו צולייגן Scrollspy פּלוגין. |
געשעענישן
| געשעעניש טיפּ | באַשרייַבונג |
|---|---|
| אַקטאַווייט.בס.סקראָלספּי | דער געשעעניש פירט אויף די מעגילע עלעמענט ווען אַ נייַ נומער ווערט אַקטיווייטיד דורך די סקראָלספּי. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})