Sliding Fixed Top Navigation on Scroll with jQuery

Top sliding Nav is a cross-browser, fully responsive and multi screen navigation system based on jQuery and other JavaScript & CSS libraries. You can create sliding fixed top navigation on scroll with the help of this jQuery and CSS plugin / code snippet.

Plugin Overview

Plugin: Top Sliding Nav
Author: Chris Gruber
Licence: MIT Licence
Published: January 12, 2024
Repository: Fork on CodePen
Dependencies: jQuery 2.1.3 or Latest version, Modernizr JS , Normalize CSS , PreFixFree JS
and Font Awesome 4

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 8 KB

How to Use Sliding Fixed Top Navigation

1. To getting started with Top Sliding Nav, load the jQuery JavaScript library, Font Awesome for Icons and other necessary assets into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Normalize CSS -->	
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />

<!-- Modernizer JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

<!-- PreFixFree JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Also include the Sliding Top Nav CSS and JavaScript files into your webpage.

<!-- Top Sliding Nav CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Top Sliding Nav JS -->
<script  src="js/index.js"></script>

3. After including all assets, finally create HTML structure for navigation and header like below.

<header class="main_header">
    <div class="row">
     <div class="content"> 
        <a class="logo" href="#">GD</a>

        <div class="mobile-toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <nav>
            <ul>
                <li><a href="#sec01">Section 01</a></li>
                <li><a href="#sec02">Section 02</a></li>
                <li><a href="#sec03">Section 03</a></li>
                <li><a href="#sec04">Section 04</a></li>
            </ul>
        </nav>
      </div>
    </div> <!-- END row -->
</header>

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...