My attempt at Scrollspy
How do I make an my attempt at scrollspy?
What is a my attempt at scrollspy? How do you make a my attempt at scrollspy? This script and codes were developed by Richard on 07 January 2023, Saturday.
My attempt at Scrollspy - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My attempt at Scrollspy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navbar" id="nav"> <ul> <li class="blue active"><a href="#one" class="navbar__link" id="link-one">Page 1</a></li> <li class="green"><a href="#two" class="navbar__link" id="link-two">Page 2</a></li> <li class="orange"><a href="#three" class="navbar__link" id="link-three">Page 3</a></li> <li class="yellow"><a href="#four" class="navbar__link" id="link-four">Page 4</a></li> </ul>
</nav>
<div class="page blue top-page" id="one"> <h1>Page 1</h1>
</div>
<div class="page green" id="two"> <h1>Page 2</h1>
</div>
<div class="page orange" id="three"> <h1>Page 3</h1>
</div>
<div class="page yellow" id="four"> <h1>Page 4</h1>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
My attempt at Scrollspy - Script Codes CSS Codes
*, *:after, *:before{ margin: 0; padding: 0; box-sizing: border-box;
}
body{ font-family: 'Helvetica Neue', Arial, Verdana, sans-serif; font-size: 16px; line-height: 142%;
}
nav{ position: fixed; width: 100%; background-color: black; height: 59px;
}
nav ul{ float: right; margin-right: 30px; font-size: 0;
}
nav ul li{ font-size: 16px; display: inline-block;
}
nav ul li:hover{ background-color: firebrick;
}
nav ul li a{ color: white; text-decoration: none; display: block; padding: 20px 10px;
}
.navbar__link--current{ background-color: dodgerblue;
}
#link-four.navbar__link--current{ background-color: darkorange;
}
main{ padding-top: 59px;
}
div{ height: 100vh; line-height: 100vh;
}
#one{ background-color: cornflowerblue;
}
#two{ background-color: crimson;
}
#three{ background-color: darkseagreen;
}
#four{ background-color: darkorange;
}
h2{ color: white; font-size: 45px; text-align: center;
}
My attempt at Scrollspy - Script Codes JS Codes
$(document).ready(function(){ var sections = []; var scrolled_id = false; var id = false; var $navbar = $('.navbar'); var $navbar__links = $navbar.find('.navbar__link'); $navbar__links.each(function(){ sections.push($($(this).attr('href'))); }); $navbar__links.click(function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top - 60 }); }); $(window).scroll(function(e){ e.preventDefault(); var scrollTop = $(this).scrollTop() + ($(window).height() / 3); for(var i in sections){ var section = sections[i]; if(scrollTop > section.offset().top){ scrolled_id = section.attr('id'); } if(scrolled_id !== id){ id = scrolled_id; $navbar__links.removeClass('navbar__link--current'); $('a[href="#'+ id + '"]', $navbar).addClass('navbar__link--current'); } } }); $(window).trigger('scroll');
});
![My attempt at Scrollspy - Script Codes](http://shots.codepen.io/keyboarddesk/pen/BQwRMx-512.jpg)
Developer | Richard |
Username | keyboarddesk |
Uploaded | January 07, 2023 |
Rating | 3 |
Size | 2,517 Kb |
Views | 8,096 |
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 |
Working with Foundation week13 | 1,766 Kb |
Assignment 4 SCSS animations | 1,752 Kb |
Multi Contact Button in Pure CSS | 3,640 Kb |
Expandable horizontal columns | 2,341 Kb |
Modal with triggered animation inside | 5,660 Kb |
In class Week 4 - Mobile Navigation Patterns-Footer Nav | 3,732 Kb |
Background inside text | 1,917 Kb |
A Pen by Richard | 2,519 Kb |
Week 4 ICA | 2,725 Kb |
ALPACA PRESENTATION | 2,578 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 |
Sticky div | Kaslab | 2,225 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
STIKHOI | Denmch | 7,122 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Gradients | Karpovsystems | 2,394 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
NAV WPMANAGER | Mstoic | 1,991 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!