Appreciate if you can help me. I have several bootstrap rows, and one of them contain 2 columns - left for the scrollable text, and right for the description fixed by affix. Right column must be shown when I scroll down to the top of left column and hide when left column is over. I tried to make it work that way, but it didn't work out. Now affix fixed to the body (and not to the top and bottom borders of parent block like I wanted). What am I doing wrong? (except me speaking English :) )
index.html:
...
<body data-spy="scroll">
...
<div class="chapter">
<div class="row" data-target="#myScrollSpy">
<div class="col-md-5" >
my precious scrollable text
</div>
<div class="col-md-6" id="myScrollSpy">
<div id="myAffix">
my not so good working affix
</div>
</div>
</div>
</div>
...
<script>
$('#myAffix').affix({
offset: {
top: 100,
bottom: 100
}
});
</script>
...
</body>
style.css:
body {
position: relative;
}
.affix {
top: 150px;
width: 80%;
}
@media (min-width: 1200px) {
.affix {
}
}
.affix-bottom {
position: absolute;
}
@media (min-width: 1200px) {
.affix-bottom {
}
}
