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?
Sponsored by SupremePR
