Bootstrap - 滚动时带有动态内容的粘性导航栏、粘性侧边栏（左右）

Question

我正在尝试使用粘性导航栏和粘性侧边栏制作引导布局（与 Facebook 布局完全一样）。但是，当您滚动页面时，内容需要更改。我花了很多时间寻找如何使用引导程序来做到这一点，使 facebook 风格的粘性布局不是问题，但我找不到任何引导程序示例在滚动时更改内容。

这是我需要的示例： https://semantic-ui.com/modules/sticky.html#/examples

我正在尝试重现语义 UI 粘性模块的完全相同的行为，但使用引导程序。此页面左侧和右侧的粘性侧边栏正是我所需要的（只是缺少顶部导航栏）......但是如何使用引导程序而不是语义 UI 来做到这一点？

谢谢！

Answer 1

您可以使用jQuery Sticky library 执行此操作。在您的页面上包含该脚本并将其称为以下脚本。

$(document).ready(function(){
  $("#sticker").sticky({topSpacing:0});
});

这是一个工作示例。

  $(document).ready(function(){
    $(".menu").sticky({topSpacing:0});
  });

.menu {
  height: 50px;
  background-color: #ccc;
}

.long-space {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>

<div class="menu">Top menu</div>
<div class="long-space"></div>
Text...
<div class="long-space"></div>
Text...
<div class="long-space"></div>
Text...
<div class="long-space"></div>
Bottom of the document

您可以设置各种设置，在您的情况下，需要topSpacing 和bottomSpacing 才能使侧边栏项目停留一段时间，然后滚动离开页面。要确保侧边栏不出现在导航栏的顶部，请相应地设置每个项目的zIndex 属性。这是一个JSFiddle，它为这一段带来了视觉效果。

$(document).ready(function() {
  $(".menu-top").sticky({
    topSpacing: 0,
    zIndex: 10
  });

  $(".side-menu1").sticky({
    topSpacing: 50,
    bottomSpacing: 2400,
    zIndex: 5
  });

  $(".side-menu2").sticky({
    topSpacing: 50,
    bottomSpacing: 600,
    zIndex: 5
  });
});

.flex {
  display: flex;
}

.part {
  display: inline-block;
  width: 30%;
}

.content {
  border-left: 2px solid #eee;
  border-right: 2px solid #eee;
  padding: 1rem;
}

img {
  height: auto;
  width: 100%;
}

.menu-top {
  height: 50px;
  background-color: #ccc;
  z-index: 100;
}

.long-space {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>

<div class="menu-top">Top menu</div>

<div class="flex">
  <div class="part sidebar-left">
    <div class="long-space"></div>
    <div class="side-menu1">
      <img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350">
    </div>
  </div>
  <div class="part content">
    <p>
      Carefully drink from water glass and then spill it everywhere and proceed to lick the puddle lay on arms while you're using the keyboard need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Go
      into a room to decide you didn't want to be in there anyway. Fight an alligator and win wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again claw drapes, but tuxedo cats always looking
      dapper kitty kitty. The cat was chasing the mouse leave fur on owners clothes scamper so decide to want nothing to do with my owner today or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand so instead of drinking water
      from the cat bowl, make sure to steal water from the toilet. Meow and walk away make meme, make cute face where is my slave? I'm getting hungry inspect anything brought into the house favor packaging over toy meow all night. I could pee on this
      if i had the energy small kitty warm kitty little balls of fur poop in litter box, scratch the walls or lounge in doorway but climb leg, so loved it, hated it, loved it, hated it so fooled again thinking the dog likes me. Knock over christmas tree
      meow but white cat sleeps on a black shirt you call this cat food, and i show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Purrr purr littel cat, little cat purr purr. Catasstrophe slap kitten brother with paw.
    </p>
    <div class="long-space">content</div>
    <p>
      Ask for petting. Lick human with sandpaper tongue and sometimes switches in french and say "miaou" just because well why not eat plants, meow, and throw up because i ate plants yet nya nya nyan, so taco cat backwards spells taco cat use lap as chair,
      then cats take over the world. Mesmerizing birds purr or kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff yet cat snacks ooh, are those your $250
      dollar sandals? lemme use that as my litter box. Hiss at vacuum cleaner need to chase tail. Flee in terror at cucumber discovered on floor cat fur is the new black sleep on dog bed, force dog to sleep on floor ignore the human until she needs to
      get up, then climb on her lap and sprawl. Being gorgeous with belly side up meeeeouw so lick arm hair. Drink water out of the faucet hide from vacuum cleaner for meoooow. Hit you unexpectedly chew iPad power cord, so meowing non stop for food or
      a nice warm laptop for me to sit on. Cats making all the muffins peer out window, chatter at birds, lure them to mouth for russian blue. Attack the dog then pretend like nothing happened i can haz. I shredded your linens for you.
    </p>
    <div class="long-space">content</div>
    <p>
      Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce love man running from cops stops to pet cats, goes to jail, walk on car leaving trail of paw prints on hood and windshield but furrier and even more furrier hairball so chirp at
      birds ignore the squirrels, you'll never catch them anyway. Pretend you want to go out but then don't licks your face. Chase the pig around the house destroy couch as revenge. Scamper hopped up on catnip my water bowl is clean and freshly replenished,
      so i'll drink from the toilet why must they do that, yet sleep nap. Man running from cops stops to pet cats, goes to jail kitty poochy yet hack, but sleep nap. Throwup on your pillow refuse to come home when humans are going to bed; stay out all
      night then yowl like i am dying at 4am or kitty kitty yet jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls,
      the floor, the windows, the humans hide at bottom of staircase to trip human. My water bowl is clean and freshly replenished, so i'll drink from the toilet claw drapes need to check on human, have not seen in an hour might be dead oh look, human
      is alive, hiss at human, feed me bathe private parts with tongue then lick owner's face scratch leg; meow for can opener to feed me or that box? i can fit in that box for suddenly go on wild-eyed crazy rampage. Attack feet white cat sleeps on a
      black shirt mewl for food at 4am paw at beetle and eat it before it gets away nya nya nyan, but shove bum in owner's face like camera lens. Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry stuff and things yet chase
      red laser dot. Hide head under blanket so no one can see meow meow, i tell my human but immediately regret falling into bathtub. Stare at ceiling ptracy damn that dog or claw your carpet in places everyone can see - why hide my amazing artistic
      clawing skills? and stare out the window or fall over dead (not really but gets sypathy) and always ensure to lay down in such a manner that tail can lightly brush human's nose . I shredded your linens for you. Purr for no reason annoy kitten brother
      with poking swat at dog, yet chew iPad power cord. Attack the child playing with balls of wool but meow for food, then when human fills food dish, take a few bites of food and continue meowing this human feeds me, i should be a god for ears back
      wide eyed or human is washing you why halp oh the horror flee scratch hiss bite yet eat and than sleep on your face.
    </p>
    <div class="long-space">content</div>
    Bottom of the document
  </div>
  <div class="part sidebar-right">
    <div class="long-space"></div>
    <div class="long-space"></div>
    <div class="long-space"></div>
    <div class="long-space"></div>
    <div class="long-space"></div>


    <div class="side-menu2">
      <img src="https://i.kym-cdn.com/photos/images/newsfeed/000/012/445/lime-cat.jpg">
    </div>
  </div>
</div>