Bootstrap – sticky navbar, sticky sidebars (left and right) with dynamic content as you scroll

I’m trying to make a bootstrap layout with a sticky navbar and sticky sidebars (exactly like Facebook layout). However, the content needs to change as you scroll the page. I spent a lot of time looking for how to do this with bootstrap, making the facebook-style sticky layout isn’t a problem, but I can’t find any bootstrap example with changing content as you scroll.

Here’s an example of what I need: https://semantic-ui.com/modules/sticky.html#/examples

I’m trying to reproduce the exact same behavior of semantic-ui sticky module, but with bootstrap. The sticky sidebars on the left and right of this page is EXACTLY what I need (just missing the top navbar)… but how can I do this with bootstrap instead of semantic-ui?

THANKS!

Answer

You can do this using the jQuery Sticky library. Include the script on your page and call it a following.

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

Here’s a working example.

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

You can set various settings, in your case the topSpacing and bottomSpacing are needed to make a sidebar item stick for a certain period and then scroll off the page. To make sure the sidebars don’t appear on top of the navigation bar, set the zIndex property of each item accordingly. Here’s a JSFiddle which brings a visual to this paragraph.

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