I guess a lot of you knows about this little snatchy Thing, that happens when you use Bootstraps Affix in Order to get something sticky when it hits a given Point on your Website.

The Rest of your Content makes a little (or sometimes big) Jump upwards...

By reading this i can assure you that i tried a lot of different Approaches to get this running smooth and clean, like custom jQuery to get Viewports Height and Width, to use on other custom Scripts which calculates how much Jump there will be when my second bar hits the Top of my Page, and so on and on and on, until the End of our Days. But lets break it down: - nothing worked very well.

  • custom jQuery and Bootstrap-.js Coding will slow down you Site as there will be a lot of stuff calculated Client-Side
  • Custom .css may drive you nuts o.O

So i did it simple and nice (after a few Days of struggle of course):

Wrapping Containers - yes, this is the magic Word!

I guess you know the Height of your to-affix-element? Ok, then lets wrap a Container (a div for example) around it which has the exact Height of your to-affix-element. This will prevent the Rest of the Site to jump when the Affix removes the to-affix-element from the DOM.

.css

nav {
  height: 80px;
  width: 100%;
}

.nav-container {
  height: 80px;
  width: 100%;
  display: table;
}

html

<div class="nav-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<nav>

</nav>
</div>

js

 $('nav').affix({
    offset: {
    top: 100,
    bottom: function () {
    return (this.bottom = $('.footer').outerHeight(true))
    }
   }
  })

Photo by Goran Ivos on Unsplash