How to make use of it:

1. Link to the jQuery library and the sp.stickyHeader.js plugin’s files within the doc.

<link rel="stylesheet" href="/path/to/css/sp.stickyHeader.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/sp.stickyHeader.js"></script>

2. Create a header component as follows:

<header id="demo-header">
  <section class="header-top">
    Will Be Hidden When The Navbar Is Sticky
  </section>
  <section class="navbar">
    Will Be Sticky On Page
  </section>
</header>

3. Attach the plugin to the header component and we’re executed.

$('#demo-header').spSticyheader({
  hideHeaderTarget: '.header-top'
})

4. Determine how far the web page is scrolled all the way down to make the header component sticky.

$('#demo-header').spSticyheader({
  scrollHeader: 200
})

5. Add further CSS class(es) to the header component when stuck.

$('#demo-header').spSticyheader({
  customClass: 'make-small'
})

6. Determine whether or not to disable the sticky header on cell gadgets.

$('#demo-header').spSticyheader({
  mobileHeader: false
})

Smooth Sticky Header, sticky header Plugin/Github, bs sticky header on scroll

See Demo And Download