in English

ስክሮልስፒ

ኣየናይ መላግቦ ኣብዚ እዋን ኣብቲ ቪውፖርት ንጡፍ ምዃኑ ንምምልካት ኣብ ስክሮል ኣቀማምጣ ተመርኲስካ ናይ ቡትስትራፕ ምድህሳስ ወይ ዝርዝር ናይ ጉጅለ ኣካላት ብኣውቶማቲክ ምዕራፍ።

ከመይ ይሰርሕ

ስክሮልስፒ ብግቡእ ንኽሰርሕ ገለ ረቛሒታት ኣለዎ፤

  • ጃቫስክሪፕትናutil.js ካብ ምንጪ ትሃንጽ እንተኾንካ ፡ .
  • ኣብ Bootstrap nav component ወይ list group ክጥቀም ኣለዎ ።
  • Scrollspy position: relative;ኣብቲ ትስልዮ ዘለኻ ባእታ ይሓትት፣ መብዛሕትኡ ግዜ እቲ <body>.
  • ካብ ባእታታት ወጻኢ ንኻልኦት ባእታታት ክትስልል ከለኻ ፡ ስብስብ ምህላውካን ምትግባርካን <body>ኣረጋግጽ ።heightoverflow-y: scroll;
  • መልህቕ ( <a>) የድልዩን ምስኡ ናብ ሓደ ባእታ ከመልክቱ ኣለዎም id።

ብዓወት ምስ ተተግበረ፡ ናትካ nav ወይ list group ብኡ መሰረት ክመሓየሽ እዩ፡ ነቲ .activeክፍሊ ካብ ሓደ ኣቕሓ ናብቲ ዝቕጽል ነገራት ብመሰረት ተዛመድቲ ዕላማታቶም ከሰጋግሮ እዩ።

ኣብነት ኣብ navbar

ኣብ ትሕቲ navbar ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ። እቶም ንቑልቁል ዝወርድ ነገራት እውን ክጎልሑ እዮም።

@ረጒድ

ትሕዝቶ ቦታ ንኣብነት ስክሮልስፒ። ዝበለጸ ስነ ህንጻ ​​ረኺብካ። ፓስፖርት ማሕተም፡ ኮስሞፖሊታን እያ። ጽቡቕ፡ ፍሩይ፡ ጨካን፡ ኣብ መዕጸዊ ረኺብናዮ። ሓደ መዓልቲ ክስእነካ እየ ኢለ መደብ ኣውጺአ ኣይፈልጥን። ልብኻ ትበልዖ። ስዕመትካ ኮስሚክ እዩ፣ ኩሉ ምንቅስቓስ ስሕበት እዩ። እተን ማለተይ እየ ከም ንሳ እታ ሓንቲ ማለተይ እየ። ሰላም ፍቑራት እስከ ጉዕዞ ንግበር። በቃ እታ ለይቲ ከም 4 ሓምለ ምውናን! ግን ክትባኽን ትመርጽ።

@mdo ዝብል ጽሑፍ ኣሎ።

ትሕዝቶ ቦታ ንኣብነት ስክሮልስፒ። 'ምኽንያቱ ንሳ እያ እታ ሙዝን ስነጥበባዊትን እያ። (ከምዚ ኢና ንገብር) So you wanna play with magic. ስለዚ ቅድሚ ኩሉ ምሃብካ ጥራይ ርግጸኛ ኩን። ብእግረይ እየ ዝኸይድ ዘለኹ፡ ብኣየር እየ ዝኸይድ ዘለኹ (ሎሚ ምሸት)። ዘረባ ዘልሎ፡ ኩሉ ሰሚዕካዮ፡ ግዜ ንእግሪ ምጉዓዝ።

ሓደ

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

ትሕዝቶ ቦታ ንኣብነት ስክሮልስፒ። If you wanna dance, if you want it all, ኣነ እታ ክትድውለላ ዝግባእ ጓል ምዃነይ ትፈልጥ ኢኻ። በቲ ህቦብላ ምኸድኩ። ስለዚ ናይ ልደት ኮስትሞ ከእትወካ። እታ ዝሃደመት። ዝሓለፈ ዓርቢ ምሸት እወ ሕጊ ዝጠሓስና ይመስለኒ ኩሉ ግዜ ደው ክንብል ኢና ንብል። 'ምኽንያቱ ቁሩብ ዮኮ እያ፡ ቁሩብ 'ኣንታ ኣይፋልን' ድማ እያ። ኣነ መንጋጋ ድሮፒን'፡ ዓይኒ ፖፒን'፡ ርእሲ ምዝዋር፡ ኣካል ሾኪን' እየ ዝደሊ። እወ ናይ ክረዲት ካርድና ማክስ ጌርና ካብቲ ባር ተባሪርና።

ከምኡውን ገለ ተወሳኺ ትሕዝቶ ቦታ፣ ንጽቡቕ መለክዒ።

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

ኣብነት ምስ nested nav

Scrollspy ምስ nested .navs እውን ይሰርሕ እዩ። ሓደ ሰፈር እንተኾይኑ .navወለዱ .active’ ውን ክኾኑ እዮም .active። ኣብ ጥቓ navbar ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ።

ነጥቢ 1

ትሕዝቶ ቦታ ንኣብነት ስክሮልስፒ። እዚኣ ምስ ኣርእስቲ 1 ይዛመድ።ማይልስ ቁመት ትወስደካ፣ ኣዝዩ ልዑል፣ 'ምኽንያቱ ንሳ እታ ሓንቲ ኣህጉራዊ ፍሽኽታ ኣለዋ። ኣብ ዓራተይ ሓደ ዘይፈልጦ ሰብ ኣሎ፡ ኣብ ርእሰይ ምድብዳብ ኣሎ። ኣየ ኣይፋልን ። ኣብ ካልእ ህይወት ክትጸንሕ ምገበርኩኻ። 'ምኽንያቱ ኣነ፡ ኣነ ዝኾነ ነገር ዓቕሚ ኣለኒ። ንናይ ዘውዲ ውግአይ ዝምጥን። ናይ ወለድኻ መስተ ሰሪቕካ ናብ ናሕሲ ክትድይብ ትጥቀመሉ። ቃና፣ ታን ፊት ከምኡውን ድሉው፣ ተርን it up cause its gettin 'heavy. ፍቕራ ከም ሓሽሽ እዩ። ምርጫ ከም ዝነበረኒ ረሲዐዮ እየ ዝብል ግምት ኣለኒ።

ቁጽሪ 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-group

ስክሮልስፒ ምስ .list-groups እውን ይሰርሕ እዩ። ኣብ ጥቓ እቲ ዝርዝር ጉጅለ ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ።

ነጥቢ 1

ትሕዝቶ ቦታ ንናይ ስክሮልስፒ ዝርዝር-ጉጅለ ኣብነት። እዚኣ ምስ ነጥቢ 1 ዝተኣሳሰር እያ ይቕሬታ ​​ኣየድልየካን እዩ። ሕጂ ፍርሒ የለን ግደፍ ጥራይ ነጻ ኩን ብዘይ ቅድመ ኩነት ከፍቅረካ እየ። ዝሓለፈ ዓርቢ ምሸት። ሓፋር ኣይትኹን kinda guy ጽብቕቲ እያ ኢለ ክወራዘ እየ። ሓጋይ ድሕሪ ካልኣይ ደረጃ ትምህርቲ ንመጀመርታ ግዜ ኣብ ዝተራኸብናሉ እዋን። 'ምኽንያቱ ንሳ እያ እታ ሙዝን ስነጥበባዊትን እያ። እንታይ? ፅናሕ. ኣነ ፍሉይ ዝኾንኩ መሲሉኒ።

ቁጽሪ 2

ትሕዝቶ ቦታ ንናይ ስክሮልስፒ ዝርዝር-ጉጅለ ኣብነት። እዚኣ ምስ ኣርእስቲ 2 ዝተኣሳሰር እያ እወ ብናይ ገዛእ ርእሳ ህርመት ትስዕስዕ። ኣየ ኣይፋልን ። ንስኻ እቲ ዝዓበየ ክትከውን ትኽእል ኔርካ። 'ምኽንያቱ ዕሸል ርችት ኢኺ። ምናልባት ኩሎም ማዕጾታት ዝዕጸዉሉ ምኽንያት ይኸውን። ልብኻ ከፊትካ ጥራይ ክጅምር ፍቐደሉ። ስለዚ très chic እወ ክላሲክ እያ።

ቁጽሪ 3

ትሕዝቶ ቦታ ንናይ ስክሮልስፒ ዝርዝር-ጉጅለ ኣብነት። እዚ ሓደ ምስ ነጥቢ 3 ዝተኣሳሰር እዩ።ንላዕልን ላዕልን ንኸይድ። ሓደ ብዘይ እቲ ካልእ ፈጺምና ውዕል ጌርና። ኣብ ኣየር እየ ዝኸይድ ዘለኹ። ሓደ ሰብ ንቕሳትካ ተኣልዩካ ኢሉኒ። ሕጂ ከም ጽምብላሊዕ ይንሳፈፍ ኣለኹ። ቃና፣ ታን ፊት ከምኡውን ድሉው፣ ተርን it up cause its gettin 'heavy. ምኽንያቱ ሓንሳብ ናተይ ምዃንካ ሓንሳብ ናተይ ምዃንካ። በቃ ነቲ ብርሃን ኣቃጺልካ ክበርህ ክትገድፎ ኣለካ! ስለዚ ነቲ ቦለቫርድ ወቒዕና። ይስምዓካ ድዩ፣ ክሳብ ክንድዚ ወረቐት ቀጢን ኮይኑ ይስምዓካ። ኩሉ ይርእዮ ኣለኹ፡ ሕጂ ይርእዮ ኣለኹ።

ነጥቢ 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ባህሪ ምስቲ ID ወይ class ናይቲ ወላዲ ባእታ ናይ ዝኾነ Bootstrap .navcomponent ንውስኸሉ።

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>

ብመንገዲ ጃቫስክሪፕት።

ኣብ CSS ድሕሪ ምውሳኽካ position: relative;ብመንገዲ ጃቫስክሪፕት ናብቲ scrollspy ደውልሉ፤

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

ፍታሕ ዝግበረሎም ናይ መለለዪ መንነት ዕላማታት የድሊ

ናቭባር ሊንክታት ዝፍታሕ id ዕላማታት ክህልዎም ኣለዎ። ንኣብነት a <a href="#home">home</a>ምስ ገለ ኣብ DOM ከም <div id="home"></div>.

ዕላማ ዘይኮኑ :visibleባእታታት ዕሽሽ ተባሂሎም

:visibleብመሰረት jQuery ዘይኮኑ ዕላማ ዝገበሩ ባእታታት ዕሽሽ ክበሃሉን ተዛመድቲ nav ነገራት ፈጺሞም ኣይድመቑን እዮም።

ኣገባባት

.scrollspy('refresh')

scrollspy ምስ ምውሳኽ ወይ ምእላይ ባእታታት ካብ DOM ተተሓሒዙ ክትጥቀመሉ ከለኻ፡ ነቲ ናይ ምሕዳስ ሜላ ከምዚ ጌርካ ክትጽውዖ ከድልየካ እዩ፤

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

.scrollspy('dispose')

ናይ ሓደ ባእታ ስክሮልስፒ የጥፍኦ።

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ​​ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-offset="".

ሽም ዓይነት ትሑዝ መግለፂ
ኦፍሴት ዝበሃል ምዃኑ’ዩ። ቑጽሪ 10. ኣቀማምጣ ስክሮል ኣብ እትሕሰብሉ እዋን ካብ ላዕሊ ክትቅይሩ እትኽእሉ ፒክሰላት።
ሜላ ገመድ ኣውቶማቲክ እቲ ዝተሰለየ ባእታ ኣብ ኣየናይ ክፍሊ ከምዘሎ ይረክብ።ንመተሓላለፍቲ autoስክሮል ንምርካብ ዝበለጸ ሜላ ክመርጽ እዩ። offsetስክሮል ኮርዲኔት ንምርካብ jQuery offset method ክጥቀም እዩ። positionስክሮል ኮርዲኔት ንምርካብ jQuery position method ክጥቀም እዩ።
ዒላማ ሕብረ ቃላት | jQuery ነገር | DOM ባእታ Scrollspy ፕላግ-ኢን ንምትግባር ባእታ ይገልጽ።

ፍጻሜታት

ዓይነት ፍጻመ መግለፂ
activate.bs.scrollspy ዝብል ጽሑፍ ኣሎ። እዚ ፍጻመ እዚ ሓድሽ ኣቕሓ ብስክሮልስፒ ኣብ ዝንቀሳቐሰሉ እዋን ኣብቲ ናይ ስክሮል ባእታ ይትኩስ። 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})