Getting affix to work with bootstrap 4

Question

I'm doing an attempt of getting the affix.js to work with bootstrap 4. Here is the official js:

https://github.com/twbs/bootstrap/blob/master/js/affix.js

This works for example:

#foo.affix {
  top: 20px;
  color: red;
  position: fixed;
}

But there is a strange jump to the left. Does affix needs a bunch of css as well? Cause I can't find anything relating to affix in the repository.

http://jsfiddle.net/clankill3r/df8tb/2715/

score 1 · Answer 1 · edited May 23 '17 at 12:34

Yes, you must add the CSS to handle the affix-top, affix and affix-bottom positions.

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

http://getbootstrap.com/javascript/#affix

You're seeing a jump because position:fixed takes the element out of the normal document flow so you must postion it and set height, width, etc.. accordingly in the CSS.

Update:

The Affix component has been removed from Bootstrap 4, so now you must use a browser with position:sticky support, or jQuery/JS similar to my answer here

Getting affix to work with bootstrap 4

1 Answers1