QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Change Navigation Style On Scroll

Change Navigation Style On Scroll

header-scroll-effect

In this article I will show you how to change the style of a navigation bar as the user is scrolling through the webpage.


Midnight.js

Midnight is a jQuery library which allows you to change the style of your navigation menu for different sections of your website. Therefore when user is viewing different sections they will see a different kind of styled navigation menu.

Implementation

Let’s see a code example of using midnight.js
View Demo

<!doctype html>
<html>
    <head>
        <title>Change Header Style On Scroll</title>
        <style>
                        /*navigation bar style*/
            .navbar
            {
                position: fixed;
                font-size: 30px;
                width: 100%;
            }
            /*when this class is added to navigation bar its color changes to yellow*/
            .yellow
            {
                background-color: yellow;
            }
            /*when this class is added to navigation bar its color changes to red*/
            .red
            {
                background-color: red;
            }
        </style>
    </head>
    <body>
                /*this is the navigation bar markup*/
        <div class="navbar">
            QNimate
        </div>

        /*data-midnight data attribute is added to different sections of webpage for which navigation style needs to be changed. data-midnight data attribute takes a class name which is to be added to the navigation menu.*/
                /*when this section(or paragraph) enter the viewport, midnight.js adds "red" class to the navigation menu.*/
        <p data-midnight="red">
        </p>
       
                /*when this section(or paragraph) enter the viewport, midnight.js adds "yellow" class to the navigation menu.*/
        <p data-midnight="yellow">
        </p>
       
       
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="midnight.jquery.js"></script>
        <script>
        // Start midnight
        $(document).ready(function(){
            //This selector represent the HTML element(navigation bar) whose style will be changed. Midnight adds data-midnight classes to this HTML element.
            $('.navbar').midnight();
        });
        </script>
    </body>
<html>
Sep 27, 2014Narayan Prusty
Facebook Style Chat Box Popup using JavaScript and CSSCreating WordPress Tables and Storing Data
Comments: 1
  1. Jeanice
    7 years ago

    How can I implement this into my wordpress?

    ReplyCancel

Leave a Reply to Jeanice Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Midnight.js
  • Implementation
Related Articles
  • Fade Image On Scroll Effect
  • Full Screen Scrolling with Page Piling Effect
  • Full Screen Scrolling with Page Split Effect
  • Customizing Right Click Menu in HTML Page
  • wikiHow Style Popup
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license