我正在尝试使用粘性导航栏和粘性侧边栏（完全类似于Facebook布局）制作引导程序布局。但是，滚动页面时，内容需要更改。我花了很多时间来寻找如何使用bootstrap来做到这一点，使facebook风格的粘式布局不是问题，但是在滚动时更改内容时我找不到任何bootstrap示例。
这是我需要的一个例子： https://semantic-ui.com/modules/sticky.html#/examples
我正在尝试重现语义UI粘性模块的完全相同的行为，但是具有引导程序。此页面左右两侧的粘性侧边栏正是我所需要的（只是缺少顶部导航栏）...但是如何使用引导程序而不是语义UI来做到这一点？
谢谢！
答案 0 :(得分：0)
您可以使用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>