[Solved] How do I create a sticky navigation bar in Open Social?

Søren Sjøstrøm Asks: How do I create a sticky navigation bar in Open Social?
I’m using D8 and working on new theme in Open Social witch uses bootstrap/sass. In my theme I want the navigation bar (in the header region) to be sticky at the top of the screen. I’ve made some javascript/sass code but I can’t get it to work. This is what I have done so far:

Created a new javascript function in the theme_name.js file:

Code:
    //-- Sticky Header
    (function($) {
        Drupal.behaviors.navbar = {
            attach: function (context, settings) {

                var nbar = $('.header');

                if (nbar.length) {
                    var elmHeight = $('.header-top').outerHeight(true);
                    $(window).scroll(function() {

                        var scrolltop = $(window).scrollTop();
                        if (scrolltop > elmHeight) {
                            if (!nbar.hasClass('sticky')) {
                                nbar.addClass('sticky');
                            }

                        } else {
                            nbar.removeClass('sticky');
                        }
                    });
                }
            }
        }
    })();

This is a code snippet from the navbar.scss file:

Code:
.navbar-sticky-top {
  @include z-depth-3;
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-navbar-sticky;
}

Code snippet from the index.twig file:

Code:
<nav class="navbar navbar-default navbar-sticky-top" id="top"
role="banner">
    <div class="container">
      <div class="navbar-header">
...

This is the content of the region–header.html.twig file:

Code:
{% if content %}
  <nav {{ attributes.addClass('navbar navbar-default navbar-sticky-top') }} role="banner">
    <div class="container">
      {{ content }}
    </div>
  </nav>
{% endif %}

What am I missing here?

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.