How to make the top menu scroll to the top of the site and be fixed there?

Question

Bootstrap

The menu should be about 100px from the top. Bootstrap has a "navbar-fixed-top" class that hard-fixes the menu on top. How to make the menu, when scrolling, first be UNFIXED, and when it touches the top, it remains there, that is, it becomes FIXED? Thank you!

Answer 1

When scrolling the site page (scroll event), check the current position of the slider. If the page is scrolled more than 100px, assign the necessary Bootstrap class to the menu container, if less than - remove the corresponding class.
Please note: when fixing the menu, it is necessary to create a block in its original place in the body of the page that matches the size of the menu. This will avoid a jump when removing the menu from the usual flow of elements on the page.
If not tied to Bootstrap, there are plugins that allow you to fix the menu on scroll. Look.

Answer 2

Make the menu fixed right away, but move the content down by the height of the menu via css.
An example of how to make anchors work correctly.
https://jsfiddle.net/QW01_01/4rav53j6/1/

Answer 3

Thanks to all!