Fading Navigation Bar

Developer
Joseph Victory
Size
2,805 Kb
Views
28,322
  1. Fading Navigation Bar Previews
  2. Fading Navigation Bar HTML Codes
  3. Fading Navigation Bar CSS Codes
  4. Fading Navigation Bar JS Codes

How do I make an fading navigation bar?

Playing with jQuery to fade navigation bar in and out depending on user scroll.. What is a fading navigation bar? How do you make a fading navigation bar? This script and codes were developed by Joseph Victory on 20 August 2022, Saturday.

Fading Navigation Bar Previews
IQ Test

Fading Navigation Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fading Navigation Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Scroll (px) = <span class="scrollcount"> 0 </span> </a></li> </ul>
</nav>
<main><section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section>
<section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section><section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section><section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section><section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section><section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section><section id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque quam eget dolor auctor semper. Nam nibh neque, lacinia eget sagittis ut, sagittis nec ante. Quisque dapibus, augue eget ornare consequat, magna justo molestie neque, sed commodo lorem felis non sem. Donec et pharetra augue. Cras non ante blandit neque dapibus commodo. Ut venenatis blandit mi, a luctus libero. Etiam aliquet felis eu interdum elementum. Praesent sit amet venenatis elit.</p>
<p>
Donec fringilla mattis velit. Sed vehicula commodo est sit amet rhoncus. Vestibulum a urna at ante volutpat pulvinar. Ut mattis risus ut dignissim eleifend. Cras cursus mi a nibh posuere dapibus. Curabitur semper, elit ut dignissim pulvinar, ligula orci euismod libero, sit amet ullamcorper eros nisi vel sem. Aliquam ut augue id urna convallis semper. Ut urna nibh, pharetra eget lacus a, sollicitudin mollis lacus.</p>
</section>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fading Navigation Bar - Script Codes CSS Codes

body{ font-family:"Trebuchet MS", Helvetica, sans-serif; background-color:lightgrey;
}
main{ width:960px; margin: 0 auto; margin-top: 4%;
}
nav { width:100%; background:white; border-bottom:2px solid lightgrey; font-size:16px;
}
nav ul{ margin: 0 auto; width:550px;
}
nav li{ display:inline-block; padding:18px;
}
nav li a{ color:black; text-decoration:none;
}
nav li a:hover{ color:grey;
}
#home{ width:100%; padding:2%;
} .navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
opacity: 1;
}
.scrollcount{ color:red;
}

Fading Navigation Bar - Script Codes JS Codes

// This isn't finished. Would like to do the following:
// Apply fadeIn animations.
// improve code and it's efficiency.
// Any tips or feedback - @booduu
$(document).ready(function() {
$(window).scroll(function () { var count = $(window).scrollTop(); console.log(count); $('.scrollcount').html(" " + count);
if ($(window).scrollTop() < 280) { $('nav').css("opacity", 1); $('nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() > 281) { $('nav').css( "opacity", 0.33); }
});
});
Fading Navigation Bar - Script Codes
Fading Navigation Bar - Script Codes
Home Page Home
Developer Joseph Victory
Username j-w-v
Uploaded August 20, 2022
Rating 3
Size 2,805 Kb
Views 28,322
Do you need developer help for Fading Navigation Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph Victory (j-w-v) Script Codes
Name
A Pen by Joseph Victory
IPad Pro lock screen
Loading Animation
Faded Title
Portfolio Opening Page
To Do List using firebase
Blog Post Using Vertical Rhythm
To Do List
Login Form
Perfect Primary Colors
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!