Fixed nav on scroll with button for full screen search in Genesis

In Genesis Slack chat a user asked,

Is it possible to get this tutorial, https://sridharkatakam.com/slide-search-box-full-screen-overlay-genesis/ to work with this one https://sridharkatakam.com/how-to-make-primary-navigation-in-genesis-sticky-on-scroll-for-desktops-and-mobile-responsive-on-handhelds/?

In this tutorial I share the steps for adding a magnifying glass search icon to the right of Primary nav in Genesis which when clicked opens a full screen overlay showing a search field. Also we shall use Sticky-Kit jQuery script to make the primary nav remain fixed to top of the browser when user scrolls to it.

Screencast:

Screenshots:

When the page has not been scrolled:

When scrolled down:

Full screen search overlay when the search icon is clicked:

i.e., essentially a condensed mixture of How to Slide Down Search Box in a Full Screen Overlay in Genesis and How to make Primary navigation in Genesis sticky on scroll for desktops and mobile responsive on handhelds.

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Download the source code from here.

Step 2

Extract the downloaded zip file, go inside js folder and upload classie.js, demo1.js and modernizr.custom.js to child theme's js directory.

Upload css/style3.css to child theme's css directory (create if not existing).

Upload img/cross.png to child theme's images directory.

Step 3

Upload jquery.sticky-kit.min.js to child theme's js directory.

Step 4

Create a file named say, non-handhelds.js in the same location having this code: