Fading Navigation Bar
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 - 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); }
});
});
Developer | Joseph Victory |
Username | j-w-v |
Uploaded | August 20, 2022 |
Rating | 3 |
Size | 2,805 Kb |
Views | 28,336 |
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!
Name | Size |
Pricing Tables | 2,609 Kb |
Instagram User Profile | 3,273 Kb |
To Do List using firebase | 2,894 Kb |
Faded Title | 2,853 Kb |
Navigation | 2,091 Kb |
Pricing Tables | 3,407 Kb |
A Pen by Joseph Victory | 2,420 Kb |
Login Process | 2,291 Kb |
Responsive Blog Homepage | 2,567 Kb |
Perfect Primary Colors | 1,835 Kb |
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!
Name | Username | Size |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
STIKHOI | Denmch | 7,122 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Count up | Alanshortis | 2,391 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!