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