"Gaps" when using Bootstrap Affix
I am trying to use Bootstraps Affix feature in sticky subnav.
<div class="container" data-spy="affix" data-offset-top="417" id="subnav">
I typed the offset so that there is no "skip" or "jump" when the subnav snaps into place. The problem I'm having is that the content under the subnav bounces on the page under the nav / subnav because the subnav changes from relative to fixed and loses its computed height.
Is there a way to counter this? My original though its an add / remove class for the next div that adds in the correct padding or margin.
Here's a jsfiddle to help illustrate the problem . Pay attention to H2 when scrolling.
source to share
I took a look at this.
When the second navbar scroll is enabled, it accepts position:fixed
, and the subsequent div resizes to the space it was, causing the flicker.
I tried listening affixed.bs.affix
with no luck, but this is the route I checked. See http://getbootstrap.com/javascript/#affix-events .
Typically, it should look something like this:
$("#subnav").on("affixed.bs.affix", function() {
// Adjust the next div here. Add a top margin
});
source to share