Recreate ScrollSpy v1

Developer
Jerusha Johnson
Size
3,692 Kb
Views
22,264
  1. Recreate ScrollSpy v1 Previews
  2. Recreate ScrollSpy v1 HTML Codes
  3. Recreate ScrollSpy v1 CSS Codes
  4. Recreate ScrollSpy v1 JS Codes

How do I make an recreate scrollspy v1?

Try to recreate Bootstrap scroll spy to avoid loading all of bootstrap for one feature.. What is a recreate scrollspy v1? How do you make a recreate scrollspy v1? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.

Recreate ScrollSpy v1 Previews
IQ Test

Recreate ScrollSpy v1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recreate ScrollSpy v1</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navigation fixed" id="nav-bar"> <ul> <li class="blue active" data-topic="page1"><a href="#page1">Page 1</a></li> <li class="green" data-topic="page2"><a href="#page2">Page 2</a></li> <li class="orange" data-topic="page3"><a href="#page3">Page 3</a></li> <li class="yellow" data-topic="page4"><a href="#page4">Page 4</a></li> </ul>
</nav>
<div class="page blue top-page" id="page1"> <h1>Page 1</h1>
</div>
<div class="page green" id="page2"> <h1>Page 2</h1>
</div>
<div class="page orange" id="page3"> <h1>Page 3</h1>
</div>
<div class="page yellow" id="page4"> <h1>Page 4</h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recreate ScrollSpy v1 - Script Codes CSS Codes

html, body { margin: 0; padding: 0;
}
.fixed { position: fixed; top: 0;
}
.navigation { width: 100%; background-color: white; height: 75px;
}
.navigation ul { list-style: none; margin: 20px 0 0 0; padding: 0;
}
.navigation ul li { display: inline-block; margin: 0 0 0 30px; padding: 0;
}
.navigation ul li.active a { border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: inherit;
}
.navigation ul li.blue { border-bottom-color: #0071c5;
}
.navigation ul li.green { border-bottom-color: #c4d600;
}
.navigation ul li.orange { border-bottom-color: #fc4c02;
}
.navigation ul li.yellow { border-bottom-color: #f3d54e;
}
.navigation ul li a:link,
.navigation ul li a:visited,
.navigation ul li a:active,
.navigation ul li a:hover,
.navigation ul li a:focus { color: #333; text-decoration: none; padding-bottom: 10px;
}
.top-page { margin-top: 75px;
}
.page { min-height: 500px;
}
.page.blue { background-color: #0071c5;
}
.page.green { background-color: #c4d600;
}
.page.orange { background-color: #fc4c02;
}
.page.yellow { background-color: #f3d54e;
}

Recreate ScrollSpy v1 - Script Codes JS Codes

;
(function($, window, document, undefined) { // Add our plugin to fn $.fn.extend({ // Scrollr is the name of the plugin scrollr: function(options) { // Define our defaults var defaults = { namespace: 'scrollr', activeClass: 'active', animate: false, offset: 0, container: window }; // Add any overriden options to a new object options = $.extend({}, defaults, options); // Adds two numbers together var add = function(ex1, ex2) { return parseInt(ex1, 10) + parseInt(ex2, 10); } // Find our elements var findElements = function(links) { // Declare our array var elements = []; // Loop through the links for (var i = 0; i < links.length; i++) { // Get our current link var link = links[i]; // Get our hash var hash = $(link).attr("href"); // Store our hash as an element var element = $(hash); // If we have an element matching the hash if (element.length > 0) { // Get our offset var top = Math.floor(element.offset().top), bottom = top + Math.floor(element.outerHeight()); // Add to our array elements.push({ element: element, hash: hash, top: top, bottom: bottom }); } } // Return our elements return elements; }; // Find our link from a hash var findLink = function(links, hash) { // For each link for (var i = 0; i < links.length; i++) { // Get our current link var link = $(links[i]); // If our hash matches the link href if (link.attr("href") === hash) { // Return the link return link; } } }; // Reset classes on our elements var resetClasses = function(links) { // For each link for (var i = 0; i < links.length; i++) { // Get our current link var link = $(links[i]); // Remove the active class link.parent().removeClass(options.activeClass); } }; // For each scrollspy instance return this.each(function() { // Declare our global variables var element = this, container = $(options.container); // Get our objects var links = $(element).find('a'); // Loop through our links for (var i = 0; i < links.length; i++) { // Get our current link var link = links[i]; // Bind the click event $(link).on("click", function(e) { // Get our target var target = $(this).attr("href"), $target = $(target); // If we have the element if ($target.length > 0) { // Get it's scroll position var top = add($target.offset().top, options.offset); // If animation is on if (options.animate) { // Animate our scroll $('html, body').animate({ scrollTop: top }, 1000); } else { // Scroll to our position window.scrollTo(0, top); } // Prevent our link e.preventDefault(); } }); } // Get our elements var elements = findElements(links); // Add a listener to the window container.bind('scroll.' + options.namespace, function() { // Get the position and store in an object var position = { top: add($(this).scrollTop(), Math.abs(options.offset)), left: $(this).scrollLeft() }; // Create a variable for our link var link; // Loop through our elements for (var i = 0; i < elements.length; i++) { // Get our current item var current = elements[i]; // If we are within the boundries of our element if (position.top >= current.top && position.top < current.bottom) { // get our element var hash = current.hash; // Get the link link = findLink(links, hash); // If we have a link if (link) { // If we have an onChange function if (options.onChange) { // Fire our onChange function options.onChange(current.element, $(element), position); } // Reset the classes on all other link resetClasses(links); // Add our active link to our parent link.parent().addClass(options.activeClass); // break our loop break; } } } // If we don't have a link and we have a exit function if (!link && options.onExit) { // Fire our onChange function options.onExit($(element), position); } }); }); } });
})(jQuery, window, document, undefined);
$("#nav-bar").scrollr();
Recreate ScrollSpy v1 - Script Codes
Recreate ScrollSpy v1 - Script Codes
Home Page Home
Developer Jerusha Johnson
Username bonzaipenguin
Uploaded October 22, 2022
Rating 3
Size 3,692 Kb
Views 22,264
Do you need developer help for Recreate ScrollSpy v1?

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!

Jerusha Johnson (bonzaipenguin) Script Codes
Name
A Pen by Jerusha Johnson
X-axis and Y-axis Affixes
Logo Trial v2
Type Specimen
Medium-esque
Phone-esque Accordian
Project Showcase Idea
Photo Week Bug
Wedding Announcement Idea
Engagement
Create amazing sales emails 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!