Navigation highlighting using waypoints.js

Developer

Size

6,689 Kb

Views

34,408

Navigation highlighting using waypoints.js Previews
Navigation highlighting using waypoints.js HTML Codes
Navigation highlighting using waypoints.js CSS Codes
Navigation highlighting using waypoints.js JS Codes

How do I make an navigation highlighting using waypoints.js?

Marking sections and articles in view (click or scroll to test). What is a navigation highlighting using waypoints.js? How do you make a navigation highlighting using waypoints.js? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Navigation highlighting using waypoints.js Previews

Navigation highlighting using waypoints.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation highlighting using waypoints.js</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <nav role="navigation" id="nav"> <ul> <li><a href="#top">Header</a></li> <li> <a href="#food">Food</a> <ul> <li><a href="#A1">Article A1</a></li> <li><a href="#A2">Aritcle A2</a></li> <li><a href="#A3">Aritcle A3</a></li> <li><a href="#A4">Aritcle A4</a></li> </ul> </li> <li> <a href="#fashion">Fashion</a> <ul> <li><a href="#B1">Aritcle B1</a></li> <li><a href="#B2">Aritcle B2</a></li> <li><a href="#B3">Aritcle B3</a></li> <li><a href="#B4">Aritcle B4</a></li> <li><a href="#B5">Aritcle B5</a></li> <li><a href="#B6">Aritcle B6</a></li> <li><a href="#B7">Aritcle B7</a></li> </ul> </li> <li> <a href="#abstract">Abstract</a> <ul> <li><a href="#C1">Aritcle C1</a></li> <li><a href="#C2">Aritcle C2</a></li> <li><a href="#C3">Aritcle C3</a></li> </ul> </li> <li><a href="#bot">Footer</a></li> </ul>	</nav> <header id="top" class="responsive-fonts">	<h1>Navigation highlighting using waypoints</h1>	<p>marking sections and articles in view (click or scroll to test)<p> </header> <aside>	<a href="http://imakewebthings.com/jquery-waypoints">Build using jquery-waypoints</a> </aside> <main> <section id="food">	<article id="A1"></article>	<article id="A2"></article>	<article id="A3"></article>	<article id="A4"></article> </section> <section id="fashion"> <article id="B1"></article> <article id="B2"></article> <article id="B3"></article> <article id="B4"></article> <article id="B5"></article> <article id="B6"></article> <article id="B7"></article> </section> <section id="abstract"> <article id="C1"></article> <article id="C2"></article> <article id="C3"></article> </section> </main> <footer id="bot"> <p>Footer stuff</p> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Navigation highlighting using waypoints.js - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,300,500,600,100,200,800,900);
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none;
}
nav, aside, header, footer, aside, section, main, footer, aside, section, article { display: block;
}
body { background: #fcfcfc;
}
body > div { margin: 0 auto; max-width: 800px;
}
nav { background: #999; position: fixed; width: 140px; -webkit-box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2); padding: 1px; padding-top: 0; top: 20px;
}
header, footer, aside, section { float: left; clear: left; width: 100%; width: calc(100% - 180px); padding: 20px; margin-left: 140px; max-width: 640px; background: white; -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
footer, aside { background: #f1f1f1; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 40px;
}
aside { padding: 20px 0; background-color: #fafafa; background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, white 35px, white 50px);
}
section { background: white;
}
article { float: left; width: 100%; padding: 20px; margin-bottom: 20px; min-height: 300px;
}
article:after { content: ''; display: block; position: relative; height: 4px; width: 100%; background-color: #fafafa; background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, white 35px, white 40px);
}
h1 { font: 300 2.9em/120% 'Raleway', sans-serif; margin-bottom: 10px; color: purple;
}
h1 + p { font: 500 14px/22px 'Raleway', sans-serif; margin-bottom: 0; margin-left: 20px; color: purple;
}
h1 + p:before { content: '- '; position: absolute; margin-left: -10px;
}
h2 { font: 300 36px/30px 'Raleway', sans-serif; margin-bottom: 20px; color: purple;
}
h3 { font: 400 24px/30px 'Raleway', sans-serif; margin-bottom: 20px; color: purple;
}
p { font: 14px/22px helvetica,arial,sans-serif; margin-bottom: 20px;
}
img { width: 100%; height: auto; margin-bottom: 20px;
}
a { display: block; font: 14px/22px helvetica,arial,sans-serif; color: purple; text-decoration: none; padding: 2px 20px;
}
a[href="#top"] { background: #340034; color: white; padding: 20px; text-align: center; font-size: 18px;
}
a[href="#bot"] { background: #670067; color: white; padding: 10px 20px; text-align: center;
}
nav > ul li a { background: #a6a6a6; color: white;
}
nav > ul li a.active, nav > ul li a:hover { background: purple; color: white;
}
nav > ul li ul li a { background: #fafafa; color: gray;
}
nav > ul li ul li a.active, nav > ul li ul li a:hover { background: #ffb3ff; color: purple;
}
ul li ul { text-indent: 20px;
}
a { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
@media (max-width: 200px) { .responsive-fonts { font-size: 25%; }
}
@media (min-width: 208px) { .responsive-fonts { font-size: 26%; }
}
@media (min-width: 216px) { .responsive-fonts { font-size: 27%; }
}
@media (min-width: 224px) { .responsive-fonts { font-size: 28%; }
}
@media (min-width: 232px) { .responsive-fonts { font-size: 29%; }
}
@media (min-width: 240px) { .responsive-fonts { font-size: 30%; }
}
@media (min-width: 248px) { .responsive-fonts { font-size: 31%; }
}
@media (min-width: 256px) { .responsive-fonts { font-size: 32%; }
}
@media (min-width: 264px) { .responsive-fonts { font-size: 33%; }
}
@media (min-width: 272px) { .responsive-fonts { font-size: 34%; }
}
@media (min-width: 280px) { .responsive-fonts { font-size: 35%; }
}
@media (min-width: 288px) { .responsive-fonts { font-size: 36%; }
}
@media (min-width: 296px) { .responsive-fonts { font-size: 37%; }
}
@media (min-width: 304px) { .responsive-fonts { font-size: 38%; }
}
@media (min-width: 312px) { .responsive-fonts { font-size: 39%; }
}
@media (min-width: 320px) { .responsive-fonts { font-size: 40%; }
}
@media (min-width: 328px) { .responsive-fonts { font-size: 41%; }
}
@media (min-width: 336px) { .responsive-fonts { font-size: 42%; }
}
@media (min-width: 344px) { .responsive-fonts { font-size: 43%; }
}
@media (min-width: 352px) { .responsive-fonts { font-size: 44%; }
}
@media (min-width: 360px) { .responsive-fonts { font-size: 45%; }
}
@media (min-width: 368px) { .responsive-fonts { font-size: 46%; }
}
@media (min-width: 376px) { .responsive-fonts { font-size: 47%; }
}
@media (min-width: 384px) { .responsive-fonts { font-size: 48%; }
}
@media (min-width: 392px) { .responsive-fonts { font-size: 49%; }
}
@media (min-width: 400px) { .responsive-fonts { font-size: 50%; }
}
@media (min-width: 408px) { .responsive-fonts { font-size: 51%; }
}
@media (min-width: 416px) { .responsive-fonts { font-size: 52%; }
}
@media (min-width: 424px) { .responsive-fonts { font-size: 53%; }
}
@media (min-width: 432px) { .responsive-fonts { font-size: 54%; }
}
@media (min-width: 440px) { .responsive-fonts { font-size: 55%; }
}
@media (min-width: 448px) { .responsive-fonts { font-size: 56%; }
}
@media (min-width: 456px) { .responsive-fonts { font-size: 57%; }
}
@media (min-width: 464px) { .responsive-fonts { font-size: 58%; }
}
@media (min-width: 472px) { .responsive-fonts { font-size: 59%; }
}
@media (min-width: 480px) { .responsive-fonts { font-size: 60%; }
}
@media (min-width: 488px) { .responsive-fonts { font-size: 61%; }
}
@media (min-width: 496px) { .responsive-fonts { font-size: 62%; }
}
@media (min-width: 504px) { .responsive-fonts { font-size: 63%; }
}
@media (min-width: 512px) { .responsive-fonts { font-size: 64%; }
}
@media (min-width: 520px) { .responsive-fonts { font-size: 65%; }
}
@media (min-width: 528px) { .responsive-fonts { font-size: 66%; }
}
@media (min-width: 536px) { .responsive-fonts { font-size: 67%; }
}
@media (min-width: 544px) { .responsive-fonts { font-size: 68%; }
}
@media (min-width: 552px) { .responsive-fonts { font-size: 69%; }
}
@media (min-width: 560px) { .responsive-fonts { font-size: 70%; }
}
@media (min-width: 568px) { .responsive-fonts { font-size: 71%; }
}
@media (min-width: 576px) { .responsive-fonts { font-size: 72%; }
}
@media (min-width: 584px) { .responsive-fonts { font-size: 73%; }
}
@media (min-width: 592px) { .responsive-fonts { font-size: 74%; }
}
@media (min-width: 600px) { .responsive-fonts { font-size: 75%; }
}
@media (min-width: 608px) { .responsive-fonts { font-size: 76%; }
}
@media (min-width: 616px) { .responsive-fonts { font-size: 77%; }
}
@media (min-width: 624px) { .responsive-fonts { font-size: 78%; }
}
@media (min-width: 632px) { .responsive-fonts { font-size: 79%; }
}
@media (min-width: 640px) { .responsive-fonts { font-size: 80%; }
}
@media (min-width: 648px) { .responsive-fonts { font-size: 81%; }
}
@media (min-width: 656px) { .responsive-fonts { font-size: 82%; }
}
@media (min-width: 664px) { .responsive-fonts { font-size: 83%; }
}
@media (min-width: 672px) { .responsive-fonts { font-size: 84%; }
}
@media (min-width: 680px) { .responsive-fonts { font-size: 85%; }
}
@media (min-width: 688px) { .responsive-fonts { font-size: 86%; }
}
@media (min-width: 696px) { .responsive-fonts { font-size: 87%; }
}
@media (min-width: 704px) { .responsive-fonts { font-size: 88%; }
}
@media (min-width: 712px) { .responsive-fonts { font-size: 89%; }
}
@media (min-width: 720px) { .responsive-fonts { font-size: 90%; }
}
@media (min-width: 728px) { .responsive-fonts { font-size: 91%; }
}
@media (min-width: 736px) { .responsive-fonts { font-size: 92%; }
}
@media (min-width: 744px) { .responsive-fonts { font-size: 93%; }
}
@media (min-width: 752px) { .responsive-fonts { font-size: 94%; }
}
@media (min-width: 760px) { .responsive-fonts { font-size: 95%; }
}
@media (min-width: 768px) { .responsive-fonts { font-size: 96%; }
}
@media (min-width: 776px) { .responsive-fonts { font-size: 97%; }
}
@media (min-width: 784px) { .responsive-fonts { font-size: 98%; }
}
@media (min-width: 792px) { .responsive-fonts { font-size: 99%; }
}

Navigation highlighting using waypoints.js - Script Codes JS Codes

// ======================================
// Helper functions
// ======================================
// Get section or article by href
function getRelatedContent(el){ return $($(el).attr('href'));
}
// Get link by section or article id
function getRelatedNavigation(el){ return $('nav a[href=#'+$(el).attr('id')+']');
}
// ======================================
// Smooth scroll to content
// ======================================
$('nav a').on('click',function(e){ e.preventDefault(); $('html,body').animate({scrollTop:getRelatedContent(this).offset().top - 20})
});
// ======================================
// Waypoints
// ======================================
// Default cwaypoint settings
// - just showing
var wpDefaults={ context: window, continuous: true, enabled: true, horizontal: false, offset: 0, triggerOnce: false
};
$('section,article') .waypoint(function(direction) { // Highlight element when related content // is 10% percent from the bottom... // remove if below getRelatedNavigation(this).toggleClass('active', direction === 'down'); }, { offset: '90%' // }) .waypoint(function(direction) { // Highlight element when bottom of related content // is 100px from the top - remove if less // TODO - make function for this getRelatedNavigation(this).toggleClass('active', direction === 'up'); }, { offset: function() { return -$(this).height() + 100; } });
// ======================================
// Random content and navigation headers
// ======================================
$('section').each(function(){ var cap=getRelatedNavigation(this).text(); $(this).prepend('<h2>'+cap+'</h2>')
})
$('article').each(function(){ var cap=getRelatedNavigation(this).text(); var w=Math.ceil(Math.random()*200)+400; var h=w-200; var c=$(this).closest('section').attr('id'); $(this).html('<h3>'+cap+'</h3><img src="http://lorempixel.com/g/'+w+'/'+h+'/'+c+'">'+lipsum(5));
})
function lipsum(p){ var words='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod'; words+='tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam'; words+='quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo'; words+='consequat duis aute irure dolor in reprehenderit in voluptate velit esse'; words+='cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non'; words+='proident, sunt in culpa qui officia deserunt mollit anim id est laborum'; words=words.split(' '); lorem=''; for(var i=0;i<p;++i){ var w=Math.ceil( Math.random() * words.length -10 ) + 10; lorem+='<p>'+words.slice(0,w).join(' ')+'.</p>'; } return lorem;
}
/*
Thoughts and good stuff
Make event dispatchers more like:
$('#elm').on('waypoint',function(e){ alert(e.direction);
})
Offset functions
- full
- on screen
- off screen
- off screen top
- off screen bottom
- off screen left
- off screen right
- in range [top, bottom]
- in from top
- in from bottom //cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js //cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.min.js //cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js //cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js //cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js //cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js
*/

Home Page	Home
Developer	Jakob-e
Username	jakob-e
Uploaded	July 04, 2022
Rating	4.5
Size	6,689 Kb
Views	34,408

Do you need developer help for Navigation highlighting using waypoints.js?

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!

Jakob-e (jakob-e) Script Codes

Name	Size
Maintain aspect ratio or fit to content	2,136 Kb
CSS Shapes	14,064 Kb
Placeholder Services	4,197 Kb
Angular Tab Menu	5,052 Kb
Responsive Aspect-Ratio SCSS Mixin	8,503 Kb
Slide to Navigation	3,063 Kb
Profile Top	8,420 Kb
Responsive break out of parent element	6,593 Kb
SVG Encoding	3,280 Kb
SCSS z-index	7,745 Kb

Create amazing marketing copy 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!

Similar Scripts & Codes

Name	Username	Size
Angular Sandbox	Alexgurrola	1,616 Kb
Webkit decolorize	Fivera	1,675 Kb
Video Player Custom Controls	EleftheriaBatsou	3,665 Kb
Example SVGZ Data URI	Joeyhoer	2,981 Kb
Animated skewed panes	NyX	4,462 Kb
Basic jQuery Filter list	Mtedwards	2,464 Kb
Two tables and header with jspdf-autotable	Someatoms	2,245 Kb
Expandable Left Side Bar with jQuery animate	Retrofuturistic	2,483 Kb
Brian The CSS Bee	Jonitrythall	3,922 Kb
Twinkling Stars	Ripley6811	2,750 Kb

Do you want hide your ip address?

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!