Skip to content

mdcanham/sitckyNav

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 

Repository files navigation

#Sticky Nav This is some simple JS code that will allow a navigation bar that is placed below the top of a webpage to "stick" to the top of the browser window once the navigation bar is reached when scrolling.

##Setup Add the following two lines of code to the head section of your HTML file(s).

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Then download the stickyNav.js file above and save it to a location within your website directory, for example in a folder called "scripts".

Finally add the following line of code to the head section of your HTML file(s), making sure to edit the src attribute to the location that you saved stickyNav.js to.

<script src="link/to/stickyNav.js"></script>

##Usage In order for the scroll funciton to work correctly you need to give the sticky-header class to your navigation bar.

When it is time for your navagation bar to stick a class of "sticky" will be applied to the navigation bar. We will use css styles to actually controll the "sticking" of the element. Below is some starting CSS code that can be customised to work however you want it to.

.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

About

Some simple sticky navigation bar JS code.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published