18Sticky navigation

Our very first plugin is the Waypoints plugin written by Mr Caleb Troughton, it is available from his website: http://imakewebthings.com/waypoints/.

Waypoint is a bit like ScrollTop in reverse; we used ScrollTop to trigger a slow scroll to a point on the web page. Waypoints detects when we (manually) scroll past a particular point on the web page, and it provides some information about the direction of the scroll, i.e. were we scrolling up or down when we went past the point.

First of all let’s get the plugin, click the download option (highlighted in Figure 18.4).

This downloads a file called imakewebthings-waypoints-latest-... .zip.

Extract the file to some folder on your PC, the extracted folder has got a whole load of stuff in it and most of it we don’t need. In fact we only need one file from the whole lot.

Drill down through the folders until you find the lib folder.

Mine looked like this:

The only file we need is jquery.waypoints.min.js.

Before we copy the file, we need somewhere to put it and in this case it is going in the 21-global directory and then in the 05-js subdirectory. This is because the file is a third party file (we didn’t write it) so it goes under global.

Copy the jquery.waypoints.min.js file from the lib folder in the extracted file and paste it into the 21-global/05-js directory.

The final thing should look like Figure 18.6.

• If you are using the downloaded version of the web template, the file will already be there.

How do I know that this is the file I need?

It is because Mr Troughton tells me (but it does take a bit of finding), if you click the shortcuts link at the top of the Waypoints web page; it tells me I need the jQuery version and shows me the file name (highlighted):

The guide page also tells us to look in the lib directory and pick the file you need.

I want the jQuery version, there are two of these: jquery.waypoints.js and jquery.waypoints.min.js. Either will work, they are identical in terms of the code. The second one is the minimised (and unreadable) form of the first:

Use the minimised one; we won’t need to read the code.

You may be wondering what all the other files are for in the downloaded zip file and why we don’t need them. Well it’s because the whole zip file is what is called a software repository and it is stored in a software development website called GitHub.

You will come across GitHub more and more as you start looking into the plugins, virtually all the third-party software we use will be stored on GitHub, you can tell because they all have the Octocat logo:

I too use GitHub; you can see all the stuff I’ve done on it here.

It looks like this:

That’s me, the ugly bugger up on the left there.

This page shows all my repositories — ooh-err. Repositories are essentially software projects; you can see there is one for this web site PS1001-web-template. Click on it; go have a look at what I’ve been doing.

GitHub is a version control platform for software developers. Version control is a mechanism for recording changes made to any files within a software project. It records all the changes, what files were affected by each change and a reason explaining why those changes were made. It also records who made the change and the time and date of the change.

It keeps a record of every change made within the project and allows any file that has been modified to be reverted back to a previous state. It means that if you change an image on a website, you can always go back and find the original version.

In this case, the repository contains all the files that were used to develop and test Mr Troughton’s software in addition to the actual, deployable software. It also contains an historic record of all the changes made to those files in the course of development.

Now GitHub despite it’s awful name is very, very widely used by software and web developers, it is entirely free to use, it is very powerful (if a little bit confusing) and the more you look at web development stuff, the more you will come across GitHub.

GitHub is the online version of Git (yes, another awful name). Git is a local (runs on your PC) version control system and it can be integrated into Brackets with the use of a Brackets extension.

If you are serious about developing a website, I strongly suggest the you use Brackets, Git and GitHub to store all you work.

Git and GitHub have a bit of a learning curve. To make it easier for you, I’ve written a whole website about how to use it and how to make it work with Brackets.

You can see it here.

Back to the subject at hand.

The Waypoints JavaScript file needs to be loaded on every web page within the web site (just as the style.css file needs to be loaded on every page). Every page in the web site uses the sticky navigation so, consequently, every page needs the Waypoints plugin.

Loading it is just another of the <script> files in the <head> element of each page:

<html lang="en">                              <!-- Declare language -->
    <head>                                    <!-- Start of head section -->
        <meta charset="utf-8">                <!-- Use unicode char set-->

<!-- **************************************************************************
     HEAD SCRIPT AREA
     ***********************************************************************-->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <script src="21-global/05-js/jquery.waypoints.min.js"></script>
       <script src="11-resources/05-js/script.js"></script>
       <script src="01-pages/99-00-typicals/05-local-js/99-00-scroll.js"></script>

<!-- **************************************************************************
     HEAD CSS LOAD
     ***********************************************************************-->
       <link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css">
       <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
       <link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
       <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">
<!-- **************************************************************************
     TITLE
     ***********************************************************************-->
        <title>Website template typicals | PracticalSeries: Web Development</title>
    </head>

I load it before we load the script.js and scroll.js files (I don’t actually think it matters what order we use, the jQuery always waits for everything to load), just to keep all the third-party stuff together.