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:

    //-- 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:

.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:

<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:

{% 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?