2

I'm attempting to use Bootstraps Affix function in a sticky subnav.

<div class="container" data-spy="affix" data-offset-top="417" id="subnav">

I've dialed the offset so that there's no "skip" or "jump" when the subnav snaps into place. The problem I'm having is that the content below the subnav is jumping up the page, under the nav/subnav, because the subnav is changing from relative to fixed and it loses it's computed height.

Is there a way to counteract this? My initial though its to add/remove a class to the next div that adds in the correct padding or margin.

Here's a jsfiddle to help illustrate the problem. Pay attention to the H2 as you scroll.

j08691
  • 204,283
  • 31
  • 260
  • 272
Pete Fecteau
  • 302
  • 3
  • 5

1 Answers1

1

I've taken a look at this.

When the 2nd scrolling nav-bar is .affixed, it takes on a position:fixed, and the subsequent div readjusts up into the space where it was, causing the flicker.

I tried listening to affixed.bs.affix without luck, but that's the route I'd check out. See http://getbootstrap.com/javascript/#affix-events.

It should generally be something like:

$("#subnav").on("affixed.bs.affix", function() { // Adjust the next div here. Add a top margin });

Ryan
  • 76
  • 4