in English

Scrollspy

የቡትስትራፕ አሰሳን በራስ-ሰር አዘምን ወይም የቡድን ክፍሎችን በማሸብለል ቦታ ላይ በመመስረት በመመልከቻው ውስጥ የትኛው ማገናኛ እንደሚሰራ ለማመልከት ይዘርዝሩ።

እንዴት እንደሚሰራ

Scrollspy በትክክል ለመስራት ጥቂት መስፈርቶች አሉት።

  • የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ ያስፈልገዋልutil.js ።
  • በ Bootstrap nav አካል ወይም ዝርዝር ቡድን ላይ ጥቅም ላይ መዋል አለበት .
  • Scrollspy በሚሰልሉበት position: relative;ኤለመንት ላይ ይጠይቃል፣ አብዛኛውን ጊዜ የ <body>.
  • ከ ን ውጭ ሌሎች አካላትን በሚሰልሉበት ጊዜ ስብስብ እና መተግበሩን <body>ያረጋግጡ ።heightoverflow-y: scroll;
  • መልህቆች ( <a>) ያስፈልጋሉ እና ከዚያ ጋር ወደ አንድ አካል መጠቆም አለባቸው id።

በተሳካ ሁኔታ ሲተገበር የእርስዎ ናቭ ወይም የዝርዝር ቡድን .activeበተዛማጅ ዒላማዎቻቸው ላይ በመመስረት ክፍሉን ከአንድ ንጥል ወደ ቀጣዩ ያንቀሳቅሳል።

ምሳሌ በ navbar ውስጥ

ከአሳሹ በታች ያለውን ቦታ ያሸብልሉ እና የነቃ ክፍል ለውጥ ይመልከቱ። የተቆልቋዩ እቃዎችም ይደምቃሉ።

@ ስብ

የቦታ ያዥ ይዘት ለ 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>

ለምሳሌ ከጎጆው ጋር

.navScrollspy እንዲሁ ከጎጆ s ጋር ይሰራል ። .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>

ምሳሌ ከዝርዝር-ቡድን ጋር

.list-groupScrollspy ከ s ጋርም ይሰራል ። ከዝርዝሩ ቡድን ቀጥሎ ያለውን ቦታ ያሸብልሉ እና የነቃውን ክፍል ለውጥ ይመልከቱ።

ንጥል 1

የቦታ ያዥ ይዘት ለ scrollspy ዝርዝር-ቡድን ምሳሌ። ይህ ከንጥል 1 ጋር ይዛመዳል. ይቅርታ አያስፈልግም. አሁን ምንም ፍርሃት የለም, ልቀቁ እና ዝም ብለው ነጻ ሁን, ያለ ምንም ቅድመ ሁኔታ እወድሻለሁ. ባለፈው አርብ ምሽት. ዓይናፋር አትሁን ቆንጆ ነው እወራለሁ። ከሁለተኛ ደረጃ ትምህርት ቤት በኋላ የበጋ ወቅት ለመጀመሪያ ጊዜ ስንገናኝ። ምክንያቱም እሷ ሙዚየም እና አርቲስት ነች። ምንድን? ጠብቅ. እኔ እንደሆንኩ አስብ ነበር.

ንጥል 2

የቦታ ያዥ ይዘት ለ scrollspy ዝርዝር-ቡድን ምሳሌ። ይሄኛው ከንጥል 2 ጋር ይዛመዳል። አዎ፣ ለራሷ ምት ትጨፍራለች። በፍፁም. አንተ ታላቅ መሆን ትችላለህ። ምክንያቱም ህጻን ርችት ነሽ። ምናልባት ሁሉም በሮች የተዘጉበት ምክንያት ሊሆን ይችላል. ልብህን ክፈት እና ልክ ይጀምር። ስለዚህ très ሺክ፣ አዎ፣ እሷ ክላሲክ ነች።

ንጥል 3

የቦታ ያዥ ይዘት ለ scrollspy ዝርዝር-ቡድን ምሳሌ። ይህ ከንጥል 3 ጋር ይዛመዳል. ከፍ እና ከፍ እናደርጋለን. መቼም አንዱ ከሌላው ውጪ፣ ስምምነት ፈጠርን። በአየር ላይ እየተራመድኩ ነው። አንድ ሰው ንቅሳትህን እንደተወገደ ተናግሯል። አሁን እንደ ቢራቢሮ እየተንሳፈፍኩ ነው። ቃና፣ ታን ተስማሚ እና ዝግጁ፣ አዙረው ከበድ ያለ ነው። ምክኒያቱም አንዴ የኔ ከሆንክ አንዴ የኔ ነህ። መብራቱን ማቀጣጠል እና እንዲያበራ ማድረግ አለብዎት! ስለዚህ ቡሌቫርድን ነካን. ወረቀቱ ቀጭን እንደሆነ ይሰማዎታል። ሁሉንም አይቻለሁ፣ አሁን አየዋለሁ።

ንጥል 4

የቦታ ያዥ ይዘት ለ scrollspy ዝርዝር-ቡድን ምሳሌ። ይህ ከንጥል 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;፣ በጃቫስክሪፕት ወደ ጥቅልል ​​ስፓይ ይደውሉ

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

ሊፈቱ የሚችሉ መታወቂያዎች ያስፈልጋሉ።

የናቭባር አገናኞች ሊፈቱ የሚችሉ የመታወቂያ ኢላማዎች ሊኖራቸው ይገባል። ለምሳሌ፣ አንድ <a href="#home">home</a>በ DOM ውስጥ ካለ ነገር ጋር መዛመድ አለበት እንደ <div id="home"></div>.

ኢላማ ያልሆኑ :visibleአካላት ችላ ተብለዋል።

:visibleበ jQuery መሠረት ያልሆኑ የዒላማ አካላት ችላ ይባላሉ እና የእነሱ ተዛማጅ የባህር ኃይል ዕቃዎች በጭራሽ አይደምቁም።

ዘዴዎች

.scrollspy('refresh')

ከ DOM አባሎችን ከመጨመር ወይም ከማስወገድ ጋር በማጣመር scrollspy ን ሲጠቀሙ የማደስ ዘዴውን እንደሚከተለው መደወል ያስፈልግዎታል፡-

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

.scrollspy('dispose')

የአንድ ንጥረ ነገር ጥቅልል ​​ስፓይ ያጠፋል።

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset=""።

ስም ዓይነት ነባሪ መግለጫ
ማካካሻ ቁጥር 10 የማሸብለል ቦታን ሲያሰሉ ከላይ የሚካካሱ ፒክሰሎች።
ዘዴ ሕብረቁምፊ አውቶማቲክ የስለላ አካል በየትኛው ክፍል እንዳለ autoሲያገኝ የማሸብለል መጋጠሚያዎችን ለማግኘት ምርጡን ዘዴ ይመርጣል። offsetየማሸብለል መጋጠሚያዎችን ለማግኘት jQuery የማካካሻ ዘዴን ይጠቀማል። positionየማሸብለል መጋጠሚያዎችን ለማግኘት jQuery አቀማመጥ ዘዴን ይጠቀማል።
ዒላማ ሕብረቁምፊ | jQuery ነገር | DOM አባል Scrollspy ፕለጊን የሚተገበር አካልን ይገልጻል።

ክስተቶች

የክስተት አይነት መግለጫ
አግብር.bs.scrollspy ይህ ክስተት አዲስ ንጥል በጥቅል ስፓይ ሲነቃ በጥቅል ኤለመንቱ ላይ ይቃጠላል። 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})