Drupal 8 Theming with Twig by Chaz Chumley

Author:Chaz Chumley
Language: eng
Format: epub
Publisher: Packt Publishing

Save page--front.html.twig.

Make sure to clear Drupal's cache and then refresh the homepage. Our menu is now complete and functional. Finally, we need to add our custom script that will turn our header into a sticky header.

Creating a sticky header

One of the more common UI improvements seen around the Web is the implementation of sticky headers. Our mockup implements this with a little bit of CSS and some custom JavaScript.

First, the markup for our header region contain a class of header that will be used to add an additional class of sticky once the user has scrolled down the page a certain number of pixels.

Second, we can use the Document Object Model (DOM) with JavaScript to determine how far the user has scrolled past a specific element in our markup. We can use the reverse to then remove the sticky class once they have scrolled back to the top of the page.

Open octo.js located in the themes/octo/js folder.

Add the following script block: //-- Sticky Header (function() { var mainnav = $('.header'); if (mainnav.length) { var elmHeight = $('.header-top').outerHeight(true); $(window).scroll(function() { var scrolltop = $(window).scrollTop(); if (scrolltop > elmHeight) { if (!mainnav.hasClass('sticky')) { mainnav.addClass('sticky'); } } else { mainnav.removeClass('sticky'); } }) } })();

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.