1.

 Introducing jQuery plug-ins

A jQuery plug-in is a collection of codes written in a standard JavaScript file. In developing functions, these
jQuery plug-ins provide helpful methods which can be used along with other jQuery methods. 
There are hundreds of available plug-ins online that other developers have created.

2. Download sample website

Download and unzip WildWestCafe.zip. It is an example of parallax website. Once you have unzipped the file,
open it in any browser.
3. The site doesn’t have navigation menu link so far
Add HTML Markups first for navigation header
Open index.html in Notepad++ and then add the codes shown on the screenshot.
Place it before the DIV element with id wrapper.
With that, you also have to add CSS for the the navigation header
Open style.css in Notepad++ and then include the CSS codes for navigation header.
Later on, in this activity, you will know the use of active and sticky CSS classes.

4. Now we are going to do some programming

You must downloadwaypoints.min,js plug-in from Downloadable section and place the file inside js folder.
Other JS files in the folder arejquery1.11.1 and script.
Waypoint plug-in is helpful in triggering a function when you scroll to a particular element.
Open index.html again and then inside HEAD section include Waypoint jQuery plug-in. It is similar to how you
included jQuery library.
Place it after the jQuery library and before your custom JavaScript file.
Note: This plug-in works together with jQuery version 1.8 and above.
The reason why you need to place the code for including Waypoint plug-in after jQuery library - that is because
in order for Waypoint jQuery to work it looks for jQuery codes. And then it MUST be placed before your custom
JS file because when you used a Waypoint method, it looks for Waypoint plug-in.

5. Add a function
Open script.js file and then copy the codes shown on the screenshot inside $(document).ready()method.
To explain
the code, once you have already included Waypoints jQuery plug-in, you can now have access to
its global Waypoint class and methods.
As shown in line 25, the targeted element is element with id homeand then inside the waypoint
method we pass what we call an options object.
In line 26, we set the function for the handler property.

Note:
An options object is an object passed into a method which provides configuration information.
A handler property is where you have to indicate the function to be triggered when the top of the selected
element hits the top of the viewport.

From lines 27 to 28, we define the

function. The function
adds/removes  sticky class onto
the header ele ment or the
selected element. It also adds/removes active class to/from element with id link-home. The active class (as
we defined in the CSS code a while ago) when applied to an element puts an underline on the text.
This class is used as a guide for users on what section they are currently viewing on the screen.

6. Another way of using Waypoint function is by declaring an instance of Waypoint class. Look at the
screenshot as an example.
The screenshot is the same as the function we made earlier but is written in a different format.
In this format, element andhandler properties are REQUIRED to be set in passing an options object.
The role of the element property is that it selects the element to be observed during scroll.
The Offset Property
For the purpose of this activity, let us explore what an offset property does.
Add the highlighted code in the Waypoint method.

7. In this example, the function is going to be triggered when the element is 10px from the top.
(Save and run the website to see)
An offset property takes any value to trigger the function N pixels away from the selected element.

Add the other functions

Do the same thing for other sections by copying the codes inside $(document).ready()function. These
functions are triggered when the user scrolls through sections about, menu and find us.

8. When user scrolls through aboutsection, the active class in the element with id link-home is

removed. The active class is now added in the element with link-about. [In general] This means that
whenever the user scrolls through a section it removes the active class from the link of the PREVIOUS
section and puts it in the link of the current section.
Run the website
Save everything and then run it in any browser.