WP Mobile with Headroom.js

The mobile screen is quite small so why waste place for Menu logo in the head section while the user would like read and explore your content . We first try to create an animated resizing header on touch scroll, headroomJS simply adds and removes CSS classes from an element in response to a scroll event to keep the header menu all time in reach.

This is a BlogLog post :Upgrading from V0.7.0 [2014] to  last version V0.9.3 (2016-04-15)

Here headroom.js helps . We add the library in our custom blog Plugin metastyle and some extra parameter to work for us. We want the blog operates differently on orientation of the mobile. Why ? because we have many videos on the blog and watching them full screen on Horizontal Mobile is a user case many people know from youtube , the same experience we would like to have on the blog

 

Identify if we have a mobile, if there is no Orientation we have a mobile Device visiting our blog, there we add all mobile specific functions and calls

if(typeof window.orientation !== ‘undefined’){

}

 

Load Enque the Scripts we need both headroom.js and JQuery.headroom.min.js for WordPress

function wpb_adding_metascript() {
wp_register_script(‘headroom’, plugins_url(‘js/headroom.min.js’, __FILE__), array(‘jquery’),’1.1′, false);
wp_register_script(‘headroomjq’, plugins_url(‘js/jQuery.headroom.min.js’, __FILE__), array(‘jquery’),’1.1′, false);
wp_enqueue_script(‘headroom’);
wp_enqueue_script(‘headroomjq’);

}

 

Init the headroom with our haedrom Div, we should add a Setting for the Div #masthead as this will be different on every blog . Or we can autodetect the menu header.

jQuery(“#masthead”).headroom();

 

The Headroom Script from Wicky Nilliams  is available at GIT  there is also a AngularJS directive

There is also a WordPress Plugin that use this Lib WP Sticky Menu with some additional features , suprise Zero Votes in the WP Plugin repository .

Leave a comment

Leave a Reply